COM-218: Remove endAdornment from FinalFormSelect

.changeset/tricky-paws-march.md

@@ -0,0 +1,7 @@
+---
+"@comet/admin": major
+---
+
+Remove `endAdornment` prop from `FinalFormSelect` component
+
+The reason were conflicts with the clearable prop. This decision was based on the fact that MUI doesn't support endAdornment on selects (see: [mui/material-ui#17799](https://github.com/mui/material-ui/issues/17799)), and that there are no common use cases where both `endAdornment` and `clearable` are needed simultaneously.

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

@@ -36,29 +36,26 @@ export const FinalFormSelect = <T,>({
         }
     },
     children,
-    endAdornment,
     clearable,
     ...rest
-}: FinalFormSelectProps<T> & Partial<AsyncOptionsProps<T>> & Omit<SelectProps, "input">) => {
+}: 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 selectEndAdornment = clearable ? (
+    const endAdornment = clearable ? (
         <ClearInputAdornment
             position="end"
             hasClearableContent={Boolean(multiple ? (Array.isArray(value) ? value.length : value) : value)}
             onClick={() => onChange(multiple ? [] : undefined)}
         />
-    ) : (
-        endAdornment
-    );
+    ) : null;
 
     const selectProps = {
         ...rest,
         multiple,
-        endAdornment: selectEndAdornment,
+        endAdornment,
         name,
         onChange,
         onFocus,
@@ -83,7 +80,7 @@ export const FinalFormSelect = <T,>({
                             <CircularProgress size={16} color="inherit" />
                         </InputAdornment>
                     )}
-                    {selectEndAdornment}
+                    {endAdornment}
                 </>
             }
             onChange={(event) => {