COM-160: Fix clearable for FinalFormSelect with multiple (#1365)

When the `multiple` prop is set, the value is an array.
Therefore, checking if the select has a value must be done with
`array.length` and clearing the value must set it to an empty array
instead of `undefined`.

.changeset/shy-suns-worry.md

@@ -0,0 +1,8 @@
+---
+"@comet/admin": patch
+---
+
+Fix the clear-button in `FinalFormSelect` when using it with the `multiple` prop.
+
+-   The clear button is now only shown when at least one value is selected.
+-   Clearing the value now sets it to an empty array instead of `undefined`, which would cause an error when trying to render the select.

packages/admin/admin-stories/src/admin/form/Select.tsx

@@ -29,6 +29,7 @@ function Story() {
                 <Form
                     initialValues={{
                         multipleFlavours: [],
+                        multipleFlavoursClearable: [],
                     }}
                     onSubmit={() => {
                         //
@@ -133,6 +134,18 @@ function Story() {
                                             </FinalFormSelect>
                                         )}
                                     </Field>
+
+                                    <Field name="multipleFlavoursClearable" label="Multiple Flavours Clearable" fullWidth>
+                                        {(props) => (
+                                            <FinalFormSelect {...props} fullWidth multiple clearable>
+                                                {options.map((option) => (
+                                                    <MenuItem value={option.value} key={option.value}>
+                                                        {option.label}
+                                                    </MenuItem>
+                                                ))}
+                                            </FinalFormSelect>
+                                        )}
+                                    </Field>
                                 </CardContent>
                             </Card>
                         </form>

packages/admin/admin/src/form/FinalFormSelect.tsx

@@ -32,17 +32,32 @@ export const FinalFormSelect = <T,>({
     children,
     endAdornment,
     clearable,
+    multiple,
     ...rest
 }: FinalFormSelectProps<T> & Partial<AsyncOptionsProps<T>> & Omit<SelectProps, "input">) => {
     const selectEndAdornment = clearable ? (
-        <ClearInputAdornment position="end" hasClearableContent={Boolean(value)} onClick={() => onChange(undefined)} />
+        <ClearInputAdornment
+            position="end"
+            hasClearableContent={Boolean(multiple ? (Array.isArray(value) ? value.length : value) : value)}
+            onClick={() => onChange(multiple ? [] : undefined)}
+        />
     ) : (
         endAdornment
     );
 
+    const selectProps = {
+        ...rest,
+        multiple,
+        endAdornment: selectEndAdornment,
+        name,
+        onChange,
+        onFocus,
+        onBlur,
+    };
+
     if (children) {
         return (
-            <Select {...rest} endAdornment={selectEndAdornment} name={name} onChange={onChange} value={value} onFocus={onFocus} onBlur={onBlur}>
+            <Select {...selectProps} value={value}>
                 {children}
             </Select>
         );
@@ -53,7 +68,7 @@ export const FinalFormSelect = <T,>({
     }
 
     return (
-        <Select {...rest} endAdornment={selectEndAdornment} name={name} onChange={onChange} value={value} onFocus={onFocus} onBlur={onBlur}>
+        <Select {...selectProps} value={value}>
             {options.length === 0 && (loading || value) && (
                 <MenuItem value={value as any} key={JSON.stringify(value)}>
                     {loading ? <CircularProgress size={20} /> : getOptionLabel(value)}