feat: allow clear select value (#735)

Author: EasonSoong

demo/collections/Select.ts

@@ -22,6 +22,7 @@ const Select: CollectionConfig = {
       }],
       label: 'Select From',
       required: true,
+      isClearable: true,
     },
     {
       name: 'selectHasMany',

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. |

src/admin/components/elements/ReactSelect/index.tsx

@@ -15,6 +15,7 @@ const ReactSelect: React.FC<Props> = (props) => {
     disabled = false,
     placeholder,
     isSearchable = true,
+    isClearable,
   } = props;
 
   const classes = [
@@ -35,6 +36,7 @@ const ReactSelect: React.FC<Props> = (props) => {
       classNamePrefix="rs"
       options={options}
       isSearchable={isSearchable}
+      isClearable={isClearable}
     />
   );
 };

src/admin/components/elements/ReactSelect/types.ts

@@ -21,4 +21,5 @@ export type Props = {
   onMenuScrollToBottom?: () => void
   placeholder?: string
   isSearchable?: boolean
+  isClearable?: boolean
 }

src/admin/components/forms/field-types/Select/Input.tsx

@@ -42,6 +42,7 @@ const SelectInput: React.FC<SelectInputProps> = (props) => {
     width,
     options,
     hasMany,
+    isClearable,
   } = props;
 
   const classes = [
@@ -84,6 +85,7 @@ const SelectInput: React.FC<SelectInputProps> = (props) => {
         isDisabled={readOnly}
         options={options}
         isMulti={hasMany}
+        isClearable={isClearable}
       />
       <FieldDescription
         value={value}

src/admin/components/forms/field-types/Select/index.tsx

@@ -34,6 +34,7 @@ const Select: React.FC<Props> = (props) => {
       description,
       condition,
     } = {},
+    isClearable,
   } = props;
 
   const path = pathFromProps || name;
@@ -62,7 +63,9 @@ const Select: React.FC<Props> = (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> = (props) => {
       className={className}
       width={width}
       hasMany={hasMany}
+      isClearable={isClearable}
     />
   );
 };

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({

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 & {