From ed2d9827fe2bb06f5f7063ab577839d7d6b195ee Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Oddbj=C3=B8rn=20=C3=98vernes?= <oove@equinor.com>
Date: Thu, 5 Sep 2024 12:51:27 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20Autocomplete:=20controlled=20sin?=
 =?UTF-8?q?gleselect=20bug=20(#3614)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

controlled single select: Update internal selecteditem state when this is changed from the outside
---
 .../Autocomplete/Autocomplete.stories.tsx     | 35 +++++++++++++++++++
 .../components/Autocomplete/Autocomplete.tsx  |  5 +++
 2 files changed, 40 insertions(+)

diff --git a/packages/eds-core-react/src/components/Autocomplete/Autocomplete.stories.tsx b/packages/eds-core-react/src/components/Autocomplete/Autocomplete.stories.tsx
index ad4eb4d5d1..b96c58ca4a 100644
--- a/packages/eds-core-react/src/components/Autocomplete/Autocomplete.stories.tsx
+++ b/packages/eds-core-react/src/components/Autocomplete/Autocomplete.stories.tsx
@@ -179,6 +179,41 @@ Multiple.args = {
   options: stocks,
 }
 
+export const ControlledSingleSelect: StoryFn<
+  AutocompleteProps<MyOptionType>
+> = () => {
+  const [selectedOptions, setSelectedOptions] = useState([])
+  const options = ['option 1', 'option 2', 'option 3', 'option 4']
+  const isOptionDisabled = (item: string) => item === 'option 3'
+  return (
+    <div>
+      <Autocomplete
+        label="test"
+        options={options}
+        selectedOptions={selectedOptions}
+        onOptionsChange={({ selectedItems: options }) =>
+          setSelectedOptions(options)
+        }
+        optionDisabled={isOptionDisabled}
+      />
+      <Button
+        onClick={() => {
+          setSelectedOptions([
+            options.filter((option) => !selectedOptions.includes(option))[
+              Math.floor(Math.random() * (options.length - 1))
+            ],
+          ])
+        }}
+      >
+        Change to random other option
+      </Button>
+      <Typography>Selected option is: {selectedOptions[0]}</Typography>
+    </div>
+  )
+}
+//this story is for internal testing, so by default we hide the story from the sidebar
+ControlledSingleSelect.tags = ['!dev']
+
 export const OptionLabel: StoryFn<AutocompleteProps<MyOptionType>> = (args) => {
   const { options } = args
 
diff --git a/packages/eds-core-react/src/components/Autocomplete/Autocomplete.tsx b/packages/eds-core-react/src/components/Autocomplete/Autocomplete.tsx
index cb08e3b468..9a2a63af14 100644
--- a/packages/eds-core-react/src/components/Autocomplete/Autocomplete.tsx
+++ b/packages/eds-core-react/src/components/Autocomplete/Autocomplete.tsx
@@ -684,6 +684,11 @@ function AutocompleteInner<T>(
                 allDisabled,
               }),
             }
+          case useCombobox.stateChangeTypes.ControlledPropUpdatedSelectedItem:
+            setSelectedItems([changes.selectedItem])
+            return {
+              ...changes,
+            }
           default:
             return changes
         }