From 03aafd8b63990b7ae49b31862a7f1145e28e79b1 Mon Sep 17 00:00:00 2001
From: Magdalena Markusik <magdalena.markusik@mirumee.com>
Date: Wed, 21 Oct 2020 15:07:54 +0200
Subject: [PATCH 1/3] wip

---
 .../SingleAutocompleteSelectField.tsx                       | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/SingleAutocompleteSelectField/SingleAutocompleteSelectField.tsx b/src/components/SingleAutocompleteSelectField/SingleAutocompleteSelectField.tsx
index c8d537d11..6d1389bf2 100644
--- a/src/components/SingleAutocompleteSelectField/SingleAutocompleteSelectField.tsx
+++ b/src/components/SingleAutocompleteSelectField/SingleAutocompleteSelectField.tsx
@@ -131,6 +131,10 @@ const SingleAutocompleteSelectFieldComponent: React.FC<SingleAutocompleteSelectF
                   choice.label.toLowerCase() === inputValue.toLowerCase()
               );
 
+            const handleBlur = () => {
+              if(inputValue)
+            }
+
             return (
               <div
                 className={classNames(classes.container, className)}
@@ -149,7 +153,7 @@ const SingleAutocompleteSelectFieldComponent: React.FC<SingleAutocompleteSelectF
                     ),
                     error,
                     id: undefined,
-                    onBlur: closeMenu,
+                    onBlur: handleBlur,
                     onClick: toggleMenu
                   }}
                   error={error}

From bfdeb0d6540737c2ce90a8ec4da372b253e77c66 Mon Sep 17 00:00:00 2001
From: Magdalena Markusik <magdalena.markusik@mirumee.com>
Date: Thu, 22 Oct 2020 10:33:01 +0200
Subject: [PATCH 2/3] Fix single autocomplete inputs

---
 .../SingleAutocompleteSelectField.tsx         | 43 +++++++++++++------
 1 file changed, 31 insertions(+), 12 deletions(-)

diff --git a/src/components/SingleAutocompleteSelectField/SingleAutocompleteSelectField.tsx b/src/components/SingleAutocompleteSelectField/SingleAutocompleteSelectField.tsx
index 6d1389bf2..8df47855a 100644
--- a/src/components/SingleAutocompleteSelectField/SingleAutocompleteSelectField.tsx
+++ b/src/components/SingleAutocompleteSelectField/SingleAutocompleteSelectField.tsx
@@ -1,7 +1,6 @@
 import { InputProps } from "@material-ui/core/Input";
 import { makeStyles } from "@material-ui/core/styles";
 import TextField from "@material-ui/core/TextField";
-import useStateFromProps from "@saleor/hooks/useStateFromProps";
 import { FetchMoreProps } from "@saleor/types";
 import classNames from "classnames";
 import Downshift, { ControllerStateAndHelpers } from "downshift";
@@ -74,8 +73,6 @@ const SingleAutocompleteSelectFieldComponent: React.FC<SingleAutocompleteSelectF
   } = props;
   const classes = useStyles(props);
 
-  const [prevDisplayValue] = useStateFromProps(displayValue);
-
   const handleChange = (
     item: string,
     stateAndHelpers: ControllerStateAndHelpers
@@ -116,23 +113,45 @@ const SingleAutocompleteSelectFieldComponent: React.FC<SingleAutocompleteSelectF
               choices && selectedItem
                 ? choices.filter(c => c.value === selectedItem).length === 0
                 : false;
-            const hasInputValueChanged = prevDisplayValue !== displayValue;
 
-            if (hasInputValueChanged) {
+            const choiceFromInputValue = choices.find(
+              ({ value: choiceId }) => choiceId === inputValue
+            );
+
+            const isValueInValues = !!choiceFromInputValue;
+
+            const isValueInLabels = !!choices.find(
+              choice => choice.label === inputValue
+            );
+
+            const ensureProperValues = (alwaysCheck: boolean = false) => {
+              if (allowCustomValues && !alwaysCheck) {
+                return;
+              }
+
+              if (isValueInValues && !isValueInLabels) {
+                reset({ inputValue: choiceFromInputValue.label });
+                return;
+              }
+
               reset({ inputValue: displayValue });
-            }
+            };
 
-            const displayCustomValue =
+            const displayCustomValue = !!(
               inputValue &&
               inputValue.length > 0 &&
               allowCustomValues &&
-              !choices.find(
-                choice =>
-                  choice.label.toLowerCase() === inputValue.toLowerCase()
-              );
+              !isValueInLabels
+            );
 
             const handleBlur = () => {
-              if(inputValue)
+              ensureProperValues(true);
+              closeMenu();
+            };
+
+            // fix for bug where input value is returned from debounce as id instead of label
+            if (value === inputValue && inputValue !== "") {
+              ensureProperValues();
             }
 
             return (

From 10d8319073f69a781373d9d0450c30c837f3ee1f Mon Sep 17 00:00:00 2001
From: Magdalena Markusik <magdalena.markusik@mirumee.com>
Date: Thu, 22 Oct 2020 12:28:15 +0200
Subject: [PATCH 3/3] fix

---
 .../SingleAutocompleteSelectField.tsx                           | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/SingleAutocompleteSelectField/SingleAutocompleteSelectField.tsx b/src/components/SingleAutocompleteSelectField/SingleAutocompleteSelectField.tsx
index 8df47855a..cdc16d14d 100644
--- a/src/components/SingleAutocompleteSelectField/SingleAutocompleteSelectField.tsx
+++ b/src/components/SingleAutocompleteSelectField/SingleAutocompleteSelectField.tsx
@@ -125,7 +125,7 @@ const SingleAutocompleteSelectFieldComponent: React.FC<SingleAutocompleteSelectF
             );
 
             const ensureProperValues = (alwaysCheck: boolean = false) => {
-              if (allowCustomValues && !alwaysCheck) {
+              if ((allowCustomValues || isValueInLabels) && !alwaysCheck) {
                 return;
               }