Remove clearable from select fields (#2294)

The `clearable` prop is removed from `FinalFormSelect` and `FinalFormAsyncSelect`. They are now clearable by default when `required` is not set.
vivid-planet · Jul 29, 2024 · 949356e · 949356e
1 parent f9e972a
commit 949356e
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 29 deletions.
diff --git a/.changeset/brown-cups-exist.md b/.changeset/brown-cups-exist.md
@@ -0,0 +1,7 @@
+---
+"@comet/admin": major
+---
+
+Remove `clearable` prop from `FinalFormSelect` and `FinalFormAsyncSelect`
+
+`FinalFormSelect` and `FinalFormAsyncSelect` are now clearable when `required` is not set.
diff --git a/packages/admin/admin/src/form/Field.tsx b/packages/admin/admin/src/form/Field.tsx
@@ -70,7 +70,7 @@ export function Field<FieldValue = any, FieldElement extends HTMLElement = HTMLE
                 if (typeof children !== "function") {
                     throw new Error(`Warning: Must specify either a render function as children, or a component prop to ${name}`);
                 }
-                return children({ input, meta, disabled });
+                return children({ input, meta, disabled, required });
             }
         }
         return (

diff --git a/packages/admin/admin/src/form/FinalFormSelect.tsx b/packages/admin/admin/src/form/FinalFormSelect.tsx
@@ -10,7 +10,7 @@ export interface FinalFormSelectProps<T> extends FieldRenderProps<T, HTMLInputEl
     getOptionLabel?: (option: T) => string;
     getOptionValue?: (option: T) => string;
     children?: React.ReactNode;
-    clearable?: boolean;
+    required?: boolean;
 }
 
 export const FinalFormSelect = <T,>({
@@ -36,15 +36,15 @@ export const FinalFormSelect = <T,>({
         }
     },
     children,
-    clearable,
+    required,
     ...rest
 }: FinalFormSelectProps<T> & Partial<AsyncOptionsProps<T>> & Omit<SelectProps, "input" | "endAdornment">) => {
     // Depending on the usage, `multiple` is either a root prop or in the `input` prop.
     // 1. <Field component={FinalFormSelect} multiple /> -> multiple is in restInput
     // 2. <Field>{(props) => <FinalFormSelect {...props} multiple />}</Field> -> multiple is in rest
     const multiple = restInput.multiple ?? rest.multiple;
 
-    const endAdornment = clearable ? (
+    const endAdornment = !required ? (
         <ClearInputAdornment
             position="end"
             hasClearableContent={Boolean(multiple ? (Array.isArray(value) ? value.length : value) : value)}
@@ -60,6 +60,7 @@ export const FinalFormSelect = <T,>({
         onChange,
         onFocus,
         onBlur,
+        required,
     };
 
     if (children) {

diff --git a/storybook/src/admin/form/Select.tsx b/storybook/src/admin/form/Select.tsx
@@ -29,7 +29,6 @@ function Story() {
                 <Form
                     initialValues={{
                         multipleFlavours: [],
-                        multipleFlavoursClearable: [],
                     }}
                     onSubmit={() => {
                         //
@@ -62,18 +61,6 @@ function Story() {
                                         )}
                                     </Field>
 
-                                    <Field name="flavorClearable" label="Clearable Flavor" fullWidth>
-                                        {(props) => (
-                                            <FinalFormSelect {...props} fullWidth clearable>
-                                                {options.map((option: Option) => (
-                                                    <MenuItem value={option.value} key={option.value}>
-                                                        {option.label}
-                                                    </MenuItem>
-                                                ))}
-                                            </FinalFormSelect>
-                                        )}
-                                    </Field>
-
                                     <Field name="flavorRequired" label="Required Flavor" fullWidth>
                                         {(props) => (
                                             <FinalFormSelect {...props} fullWidth required>
@@ -134,18 +121,6 @@ function Story() {
                                             </FinalFormSelect>
                                         )}
                                     </Field>
-
-                                    <Field name="multipleFlavoursClearable" label="Multiple Flavours Clearable" fullWidth>
-                                        {(props) => (
-                                            <FinalFormSelect {...props} multiple clearable>
-                                                {options.map((option) => (
-                                                    <MenuItem value={option.value} key={option.value}>
-                                                        {option.label}
-                                                    </MenuItem>
-                                                ))}
-                                            </FinalFormSelect>
-                                        )}
-                                    </Field>
                                 </CardContent>
                             </Card>
                         </form>