From 5b0545b56d135b6986fa3386514125f44dbb7163 Mon Sep 17 00:00:00 2001
From: josh215 <josh@oneblink.io>
Date: Tue, 18 Jul 2023 12:45:19 +1000
Subject: [PATCH] ON-33060 # Using inputOption.value + moved useEffect down

---
 src/components/renderer/AutocompleteDropdown.tsx | 11 +++++++++--
 src/form-elements/FormElementAutocomplete.tsx    |  5 -----
 2 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/src/components/renderer/AutocompleteDropdown.tsx b/src/components/renderer/AutocompleteDropdown.tsx
index 3bd55a37..006799a6 100644
--- a/src/components/renderer/AutocompleteDropdown.tsx
+++ b/src/components/renderer/AutocompleteDropdown.tsx
@@ -93,7 +93,7 @@ function AutocompleteDropdown<T>({
             (option) => option.label.toLowerCase() === lowerCase,
           )
           if (option) {
-            if (!value) {
+            if (!inputOption.value) {
               console.log('Setting value after blurring away from autocomplete')
               onSelectOption(option)
             }
@@ -113,7 +113,6 @@ function AutocompleteDropdown<T>({
       onSelectOption,
       options,
       setIsDirty,
-      value,
     ],
   )
 
@@ -238,6 +237,14 @@ function AutocompleteDropdown<T>({
     }
   }, [isOpen, label, onSearch, searchDebounceMs, searchMinCharacters])
 
+  React.useEffect(() => {
+    //If there is no value set, we want to clear the label
+    //This is to satisfy lookups that return undefined.
+    if (!value) {
+      onChangeLabel('')
+    }
+  }, [onChangeLabel, value])
+
   const isShowingLoading = isFetchingOptions || !!isLoading
   const isShowingValid = !isShowingLoading && value !== undefined
   const isShowingError = !isShowingLoading && !!hasError
diff --git a/src/form-elements/FormElementAutocomplete.tsx b/src/form-elements/FormElementAutocomplete.tsx
index 0ee964ce..c7a38176 100644
--- a/src/form-elements/FormElementAutocomplete.tsx
+++ b/src/form-elements/FormElementAutocomplete.tsx
@@ -104,11 +104,6 @@ const AutocompleteFilter = React.memo(function AutocompleteFilter({
       setLabel(option.label)
     }
 
-    //If there is no value set, we want to clear the label
-    //This is to satisfy lookups that return undefined.
-    if (!value && label) {
-      setLabel('')
-    }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [element.options, value])