From 46544b8c14312f841c35e34d12f7a08bb6c0dffd Mon Sep 17 00:00:00 2001
From: kostasdano <kostas.danochristos@orfium.com>
Date: Tue, 26 Sep 2023 14:06:56 +0300
Subject: [PATCH 1/3] fix: handle backspace for Select

---
 src/components/Select/Select.tsx              | 38 ++++++++++++++-----
 .../__snapshots__/Select.stories.storyshot    |  4 ++
 src/components/Select/types.ts                |  2 +-
 3 files changed, 34 insertions(+), 10 deletions(-)

diff --git a/src/components/Select/Select.tsx b/src/components/Select/Select.tsx
index a0125a403..27cae6ed5 100644
--- a/src/components/Select/Select.tsx
+++ b/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('');
diff --git a/src/components/Select/__snapshots__/Select.stories.storyshot b/src/components/Select/__snapshots__/Select.stories.storyshot
index bd642ab7b..430874aa2 100644
--- a/src/components/Select/__snapshots__/Select.stories.storyshot
+++ b/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"
diff --git a/src/components/Select/types.ts b/src/components/Select/types.ts
index 1d44d8991..88b8dc87a 100644
--- a/src/components/Select/types.ts
+++ b/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 */

From 13152b0317b92e2b66ddc87f3c52cdd172c743dc Mon Sep 17 00:00:00 2001
From: kostasdano <kostas.danochristos@orfium.com>
Date: Tue, 26 Sep 2023 14:07:21 +0300
Subject: [PATCH 2/3] fix: async select showcase

---
 src/components/storyUtils/SelectShowcase/SelectShowcase.tsx | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/components/storyUtils/SelectShowcase/SelectShowcase.tsx b/src/components/storyUtils/SelectShowcase/SelectShowcase.tsx
index 1792929fb..484af0e51 100644
--- a/src/components/storyUtils/SelectShowcase/SelectShowcase.tsx
+++ b/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)}

From a0ca5778b9d757e7591cbfa666433db1afb4cf7c Mon Sep 17 00:00:00 2001
From: kostasdano <kostas.danochristos@orfium.com>
Date: Wed, 27 Sep 2023 14:00:51 +0300
Subject: [PATCH 3/3] feat: add comment

---
 src/components/Select/Select.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/components/Select/Select.tsx b/src/components/Select/Select.tsx
index 27cae6ed5..fb8682899 100644
--- a/src/components/Select/Select.tsx
+++ b/src/components/Select/Select.tsx
@@ -23,6 +23,8 @@ import PositionInScreen from 'components/utils/PositionInScreen';
 
 export const emptyValue: SelectOption = { label: '', value: '' };
 
+/** @TODO: Refactor component to reduce Cognitive Complexity */
+
 const Select = React.forwardRef<HTMLInputElement, SelectProps>((props, ref) => {
   const {
     selectedOption,