diff --git a/demo/collections/Select.ts b/demo/collections/Select.ts index 94f563c500..d8e69e6ab4 100644 --- a/demo/collections/Select.ts +++ b/demo/collections/Select.ts @@ -22,6 +22,7 @@ const Select: CollectionConfig = { }], label: 'Select From', required: true, + isClearable: true, }, { name: 'selectHasMany', diff --git a/docs/fields/select.mdx b/docs/fields/select.mdx index 1baa286752..e33fc65438 100644 --- a/docs/fields/select.mdx +++ b/docs/fields/select.mdx @@ -19,6 +19,7 @@ keywords: select, multi-select, fields, config, configuration, documentation, Co | **`hasMany`** | Boolean when, if set to `true`, allows this field to have many selections instead of only one. | | **`label`** | Used as a field label in the Admin panel and to name the generated GraphQL type. | | **`unique`** | Enforce that each entry in the Collection has a unique value for this field. | +| **`isClearable`** | Whether select can be cleared. | | **`validate`** | Provide a custom validation function that will be executed on both the Admin panel and the backend. [More](/docs/fields/overview#validation) | | **`index`** | Build a [MongoDB index](https://docs.mongodb.com/manual/indexes/) for this field to produce faster queries. Set this field to `true` if your users will perform queries on this field's data often. | | **`saveToJWT`** | If this field is top-level and nested in a config supporting [Authentication](/docs/authentication/config), include its data in the user JWT. | diff --git a/src/admin/components/elements/ReactSelect/index.tsx b/src/admin/components/elements/ReactSelect/index.tsx index 5974d923bc..802a8cd783 100644 --- a/src/admin/components/elements/ReactSelect/index.tsx +++ b/src/admin/components/elements/ReactSelect/index.tsx @@ -15,6 +15,7 @@ const ReactSelect: React.FC = (props) => { disabled = false, placeholder, isSearchable = true, + isClearable, } = props; const classes = [ @@ -35,6 +36,7 @@ const ReactSelect: React.FC = (props) => { classNamePrefix="rs" options={options} isSearchable={isSearchable} + isClearable={isClearable} /> ); }; diff --git a/src/admin/components/elements/ReactSelect/types.ts b/src/admin/components/elements/ReactSelect/types.ts index f8ccb77397..2e6b0349ae 100644 --- a/src/admin/components/elements/ReactSelect/types.ts +++ b/src/admin/components/elements/ReactSelect/types.ts @@ -21,4 +21,5 @@ export type Props = { onMenuScrollToBottom?: () => void placeholder?: string isSearchable?: boolean + isClearable?: boolean } diff --git a/src/admin/components/forms/field-types/Select/Input.tsx b/src/admin/components/forms/field-types/Select/Input.tsx index 9c1fa6076a..3ac3335c63 100644 --- a/src/admin/components/forms/field-types/Select/Input.tsx +++ b/src/admin/components/forms/field-types/Select/Input.tsx @@ -42,6 +42,7 @@ const SelectInput: React.FC = (props) => { width, options, hasMany, + isClearable, } = props; const classes = [ @@ -84,6 +85,7 @@ const SelectInput: React.FC = (props) => { isDisabled={readOnly} options={options} isMulti={hasMany} + isClearable={isClearable} /> = (props) => { description, condition, } = {}, + isClearable, } = props; const path = pathFromProps || name; @@ -62,7 +63,9 @@ const Select: React.FC = (props) => { const onChange = useCallback((selectedOption) => { if (!readOnly) { let newValue; - if (hasMany) { + if (!selectedOption) { + newValue = undefined; + } else if (hasMany) { if (Array.isArray(selectedOption)) { newValue = selectedOption.map((option) => option.value); } else { @@ -96,6 +99,7 @@ const Select: React.FC = (props) => { className={className} width={width} hasMany={hasMany} + isClearable={isClearable} /> ); }; diff --git a/src/fields/config/schema.ts b/src/fields/config/schema.ts index e17513782f..21a43990fc 100644 --- a/src/fields/config/schema.ts +++ b/src/fields/config/schema.ts @@ -144,6 +144,7 @@ export const select = baseField.keys({ joi.array().items(joi.string().allow('')), joi.func(), ), + isClearable: joi.boolean().default(false), }); export const radio = baseField.keys({ diff --git a/src/fields/config/types.ts b/src/fields/config/types.ts index 3d1aec8f5b..43b0c4d149 100644 --- a/src/fields/config/types.ts +++ b/src/fields/config/types.ts @@ -214,6 +214,7 @@ export type SelectField = FieldBase & { type: 'select' options: Option[] hasMany?: boolean + isClearable?: boolean; } export type RelationshipField = FieldBase & {