🐛 Fix Autocomplete onOptionsChange not always firing

packages/eds-core-react/src/components/Autocomplete/Autocomplete.docs.mdx

@@ -4,7 +4,7 @@ import * as icons from '@equinor/eds-icons'
 
 
 # Autocomplete 
-The Autocomplete component allows users to choose one or multiple options from a list
+The Autocomplete component allows users to choose one or multiple options from a list. The component is built using [Downshift](https://github.com/downshift-js/downshift) 
 
 <Story id="inputs-autocomplete--introduction" />
 <PropsTable />
@@ -77,8 +77,10 @@ You can disable an option by setting the `disabled:true` on option
 <Story id="inputs-autocomplete--preselected-options" />
 
 
-## On options change
-<Story id="inputs-autocomplete--on-options-change" />
+## Controlled
+
+Downshift controls its own state internally. If you need more controll you can define the `selectedOptions` to controlled the component state. When defining your own state the initial value needs to be an empty array. This is due to how [Downshift checks whether a component is controlled or not](https://github.com/downshift-js/downshift#control-props).
+<Story id="inputs-autocomplete--controlled" />
 
 ## Compact
 Compact `Autocomplete` using `EdsProvider`

packages/eds-core-react/src/components/Autocomplete/Autocomplete.stories.tsx

@@ -254,13 +254,10 @@ PreselectedOptions.args = {
   optionLabel,
 }
 
-export const OnOptionsChange: Story<AutocompleteProps<MyOptionType>> = (
-  args,
-) => {
+export const Controlled: Story<AutocompleteProps<MyOptionType>> = (args) => {
   const { options } = args
 
-  const initialSelectedOptions = [options[0], options[1], options[5]]
-  const [selectedItems, setSelectedItems] = useState(initialSelectedOptions)
+  const [selectedItems, setSelectedItems] = useState<MyOptionType[]>([])
 
   const onChange = (changes: AutocompleteChanges<MyOptionType>) => {
     setSelectedItems(changes.selectedItems)
@@ -269,28 +266,28 @@ export const OnOptionsChange: Story<AutocompleteProps<MyOptionType>> = (
   return (
     <Stack direction="column">
       <Typography>
-        Selected items:{selectedItems.map((x) => x.label).toString()}
+        Selected items:{selectedItems?.map((x) => x.label).toString()}
       </Typography>
       <Autocomplete
         label="Select a stock"
         options={options}
         onOptionsChange={onChange}
-        initialSelectedOptions={initialSelectedOptions}
         optionLabel={optionLabel}
+        selectedOptions={selectedItems}
       />
       <Autocomplete
         label="Select multiple stocks"
         options={options}
         onOptionsChange={onChange}
-        initialSelectedOptions={initialSelectedOptions}
+        selectedOptions={selectedItems}
         multiple
         optionLabel={optionLabel}
       />
     </Stack>
   )
 }
 
-OnOptionsChange.args = {
+Controlled.args = {
   options: stocks,
 }
 

packages/eds-core-react/src/components/Autocomplete/Autocomplete.tsx

@@ -152,7 +152,7 @@ const findPrevIndex: IndexFinderType = ({
   return prevIndex
 }
 
-export type AutocompleteChanges<T> = UseMultipleSelectionProps<T>
+export type AutocompleteChanges<T> = { selectedItems: T[] }
 
 export type AutocompleteProps<T> = {
   /** List of options to choose from */
@@ -239,17 +239,24 @@ function AutocompleteInner<T>(
       : initialSelectedOptions[0]
       ? [initialSelectedOptions[0]]
       : [],
-    onSelectedItemsChange: (changes) => {
-      if (onOptionsChange) {
-        onOptionsChange(changes)
-      }
-    },
   }
 
-  if (isControlled) {
+  if (multiple) {
     multipleSelectionProps = {
       ...multipleSelectionProps,
-      selectedItems: selectedOptions,
+      onSelectedItemsChange: (changes) => {
+        if (onOptionsChange) {
+          const { selectedItems } = changes
+          onOptionsChange({ selectedItems })
+        }
+      },
+    }
+
+    if (isControlled) {
+      multipleSelectionProps = {
+        ...multipleSelectionProps,
+        selectedItems: selectedOptions,
+      }
     }
   }
 
@@ -368,7 +375,13 @@ function AutocompleteInner<T>(
   if (isControlled && !multiple) {
     comboBoxProps = {
       ...comboBoxProps,
-      selectedItem: selectedOptions[0],
+      selectedItem: selectedOptions[0] || null,
+      onSelectedItemChange: (changes) => {
+        if (onOptionsChange) {
+          const { selectedItem } = changes
+          onOptionsChange({ selectedItems: [selectedItem] })
+        }
+      },
     }
   }