diff --git a/.changeset/tricky-paws-march.md b/.changeset/tricky-paws-march.md new file mode 100644 index 0000000000..35bfd67fe8 --- /dev/null +++ b/.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. diff --git a/packages/admin/admin/src/form/FinalFormSelect.tsx b/packages/admin/admin/src/form/FinalFormSelect.tsx index f28fafef57..78e5b841da 100644 --- a/packages/admin/admin/src/form/FinalFormSelect.tsx +++ b/packages/admin/admin/src/form/FinalFormSelect.tsx @@ -36,29 +36,26 @@ export const FinalFormSelect = ({ } }, children, - endAdornment, clearable, ...rest -}: FinalFormSelectProps & Partial> & Omit) => { +}: FinalFormSelectProps & Partial> & Omit) => { // Depending on the usage, `multiple` is either a root prop or in the `input` prop. // 1. -> multiple is in restInput // 2. {(props) => } -> multiple is in rest const multiple = restInput.multiple ?? rest.multiple; - const selectEndAdornment = clearable ? ( + const endAdornment = clearable ? ( onChange(multiple ? [] : undefined)} /> - ) : ( - endAdornment - ); + ) : null; const selectProps = { ...rest, multiple, - endAdornment: selectEndAdornment, + endAdornment, name, onChange, onFocus, @@ -83,7 +80,7 @@ export const FinalFormSelect = ({ )} - {selectEndAdornment} + {endAdornment} } onChange={(event) => {