[NDS-807] fix: select backspace does not clear value [v5]

src/components/Select/Select.tsx

@@ -81,6 +81,17 @@ const Select = React.forwardRef<HTMLInputElement, SelectProps>((props, ref) => {
         onBackspace: () => {
           debouncedOnChange('');
           setIsOpen(true);
+
+          /** When the textField's value equals the selectedOption's label we should clear the field*/
+          if (!isMulti) {
+            if (selectedOption && onChange) {
+              if (selectedOption.label === textFieldValue) {
+                onChange(undefined);
+                setSearchValue('');
+                asyncSearch('');
+              }
+            }
+          }
         },
         onAlphaNumerical: () => {
           if (isSearchable) {
@@ -109,9 +120,15 @@ const Select = React.forwardRef<HTMLInputElement, SelectProps>((props, ref) => {
 
   const [searchValue, setSearchValue] = useState('');
 
-  const textFieldValue = Array.isArray(selectedOption)
-    ? searchValue
-    : searchValue || selectedOption?.label;
+  const textFieldValue = useMemo(() => {
+    if (Array.isArray(selectedOption)) return searchValue;
+
+    if (!selectedOption) {
+      return searchValue;
+    }
+
+    return searchValue || selectedOption?.label;
+  }, [searchValue, selectedOption]);
 
   const handleOptionClick = (option: SelectOption) => {
     if (!isMulti) {
@@ -122,17 +139,20 @@ const Select = React.forwardRef<HTMLInputElement, SelectProps>((props, ref) => {
       setSearchValue('');
     }
 
-    if (onChange && selectedOption) {
-      if (isMulti) {
+    if (isMulti) {
+      if (onChange && selectedOption) {
         if (isEqual(option, SELECT_ALL_OPTION)) {
           onChange(options.filter((o) => !o.isDisabled));
         } else {
           onChange([...selectedOption, option]);
         }
-      } else {
+      }
+    } else {
+      if (onChange) {
         onChange(option);
       }
     }
+
     combinedRefs.current?.focus();
   };
 
@@ -150,7 +170,7 @@ const Select = React.forwardRef<HTMLInputElement, SelectProps>((props, ref) => {
        * For Multiselect: [for now] when we select an option the SelectMenu closes but the user
        * can still type on the input field (so they must be able to see the SelectMenu)
        */
-      if (!open) {
+      if (!isOpen) {
         setIsOpen(true);
       }
 
@@ -163,7 +183,7 @@ const Select = React.forwardRef<HTMLInputElement, SelectProps>((props, ref) => {
         minCharactersToSearch,
       });
     },
-    [debouncedOnChange, isAsync, isSearchable, minCharactersToSearch]
+    [debouncedOnChange, isAsync, isOpen, isSearchable, minCharactersToSearch]
   );
 
   const filteredOptions = useMemo(() => {
@@ -235,7 +255,7 @@ const Select = React.forwardRef<HTMLInputElement, SelectProps>((props, ref) => {
         if (isMulti) {
           onChange([]);
         } else {
-          onChange(emptyValue);
+          onChange(undefined);
         }
       }
       asyncSearch('');

src/components/Select/__snapshots__/Select.stories.storyshot

@@ -328,6 +328,7 @@ exports[`Storyshots Design System/Select Async Select 1`] = `
                       readOnly={false}
                       required={false}
                       role="combobox"
+                      value=""
                     />
                     <label
                       className="emotion-9"
@@ -694,6 +695,7 @@ exports[`Storyshots Design System/Select Async Select with min characters 1`] =
                       readOnly={false}
                       required={false}
                       role="combobox"
+                      value=""
                     />
                     <label
                       className="emotion-9"
@@ -2399,6 +2401,7 @@ exports[`Storyshots Design System/Select MultiSelect 1`] = `
                         readOnly={false}
                         required={false}
                         role="combobox"
+                        value=""
                       />
                       <label
                         className="emotion-58"
@@ -4717,6 +4720,7 @@ exports[`Storyshots Design System/Select Select with label and statuses 1`] = `
                         readOnly={false}
                         required={false}
                         role="combobox"
+                        value=""
                       />
                       <label
                         className="emotion-21"

src/components/Select/types.ts

@@ -34,7 +34,7 @@ export type MultiSelectProps = {
 };
 export type SingleSelectProps = {
   /** The function that is used to return the selected options */
-  onChange?: (selectedOption: SelectOption) => void;
+  onChange?: (selectedOption?: SelectOption) => void;
   /** If false the user can select one option */
   isMulti?: never;
   /** the value of the select if select is controlled */

src/components/storyUtils/SelectShowcase/SelectShowcase.tsx

@@ -13,6 +13,7 @@ type SelectShowcaseProps = {
 };
 
 const SelectShowcase: React.FC<SelectShowcaseProps> = ({ minCharactersToSearch = 0 }) => {
+  const [selectedOption, setSelectedOption] = useState<SelectOption>();
   const [options, setOptions] = useState<SelectOption[]>(dummyUnrefinedData);
   const [isLoading, setIsLoading] = React.useState(false);
 
@@ -39,6 +40,8 @@ const SelectShowcase: React.FC<SelectShowcaseProps> = ({ minCharactersToSearch =
         isAsync
         label={'Flavour'}
         options={options}
+        selectedOption={selectedOption}
+        onChange={setSelectedOption}
         asyncSearch={mockedApiCall}
         isLoading={isLoading}
         onKeyPress={() => setIsLoading(true)}