fix: drawer close on backspace (#2869)

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

@@ -33,6 +33,7 @@ const SelectAdapter: React.FC<ReactSelectAdapterProps> = (props) => {
     isLoading,
     onMenuOpen,
     components,
+    selectProps,
   } = props;
 
   const classes = [
@@ -47,6 +48,7 @@ const SelectAdapter: React.FC<ReactSelectAdapterProps> = (props) => {
       placeholder={getTranslation(placeholder, i18n)}
       captureMenuScroll
       {...props}
+      customProps={selectProps}
       value={value}
       onChange={onChange}
       isDisabled={disabled}

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

@@ -65,4 +65,5 @@ export type Props = {
     [key: string]: React.FC<any>
   }
   selectProps?: CustomSelectProps
+  backspaceRemovesValue?: boolean
 }

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

@@ -375,6 +375,7 @@ const Relationship: React.FC<Props> = (props) => {
       {!errorLoading && (
         <div className={`${baseClass}__wrap`}>
           <ReactSelect
+            backspaceRemovesValue={!drawerIsOpen}
             disabled={readOnly || formProcessing}
             onInputChange={(newSearch) => handleInputChange(newSearch, value)}
             onChange={!readOnly ? (selected) => {

src/admin/components/forms/field-types/Relationship/select-components/SingleValue/index.tsx

@@ -18,9 +18,11 @@ export const SingleValue: React.FC<SingleValueProps<Option>> = (props) => {
       label,
     },
     children,
-    customProps: {
-      setDrawerIsOpen,
-      onSave,
+    selectProps: {
+      customProps: {
+        setDrawerIsOpen,
+        onSave,
+      } = {},
     } = {},
   } = props;
 
@@ -35,7 +37,9 @@ export const SingleValue: React.FC<SingleValueProps<Option>> = (props) => {
   });
 
   useEffect(() => {
-    if (typeof setDrawerIsOpen === 'function') setDrawerIsOpen(isDrawerOpen);
+    if (typeof setDrawerIsOpen === 'function') {
+      setDrawerIsOpen(isDrawerOpen);
+    }
   }, [isDrawerOpen, setDrawerIsOpen]);
 
   return (