diff --git a/.changeset/brown-cups-exist.md b/.changeset/brown-cups-exist.md new file mode 100644 index 0000000000..f4df582932 --- /dev/null +++ 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 index a677b0d1ba..53b9364c14 100644 --- a/packages/admin/admin/src/form/Field.tsx +++ b/packages/admin/admin/src/form/Field.tsx @@ -70,7 +70,7 @@ export function Field extends FieldRenderProps string; getOptionValue?: (option: T) => string; children?: React.ReactNode; - clearable?: boolean; + required?: boolean; } export const FinalFormSelect = ({ @@ -36,7 +36,7 @@ export const FinalFormSelect = ({ } }, children, - clearable, + required, ...rest }: FinalFormSelectProps & Partial> & Omit) => { // Depending on the usage, `multiple` is either a root prop or in the `input` prop. @@ -44,7 +44,7 @@ export const FinalFormSelect = ({ // 2. {(props) => } -> multiple is in rest const multiple = restInput.multiple ?? rest.multiple; - const endAdornment = clearable ? ( + const endAdornment = !required ? ( ({ onChange, onFocus, onBlur, + required, }; if (children) { diff --git a/storybook/src/admin/form/Select.tsx b/storybook/src/admin/form/Select.tsx index a1abf67f0c..65517baba7 100644 --- a/storybook/src/admin/form/Select.tsx +++ b/storybook/src/admin/form/Select.tsx @@ -29,7 +29,6 @@ function Story() {
{ // @@ -62,18 +61,6 @@ function Story() { )} - - {(props) => ( - - {options.map((option: Option) => ( - - {option.label} - - ))} - - )} - - {(props) => ( @@ -134,18 +121,6 @@ function Story() { )} - - - {(props) => ( - - {options.map((option) => ( - - {option.label} - - ))} - - )} -