feat: allow clear select value (#735)

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