diff --git a/packages/eds-core-react/src/components/Autocomplete/Autocomplete.docs.mdx b/packages/eds-core-react/src/components/Autocomplete/Autocomplete.docs.mdx
index 26ec36757c..51cfe00046 100644
--- a/packages/eds-core-react/src/components/Autocomplete/Autocomplete.docs.mdx
+++ b/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)
@@ -77,8 +77,10 @@ You can disable an option by setting the `disabled:true` on option
-## 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).
+
## Compact
Compact `Autocomplete` using `EdsProvider`
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 accb90cf76..c130dfcc67 100644
--- a/packages/eds-core-react/src/components/Autocomplete/Autocomplete.stories.tsx
+++ b/packages/eds-core-react/src/components/Autocomplete/Autocomplete.stories.tsx
@@ -254,13 +254,10 @@ PreselectedOptions.args = {
optionLabel,
}
-export const OnOptionsChange: Story> = (
- args,
-) => {
+export const Controlled: Story> = (args) => {
const { options } = args
- const initialSelectedOptions = [options[0], options[1], options[5]]
- const [selectedItems, setSelectedItems] = useState(initialSelectedOptions)
+ const [selectedItems, setSelectedItems] = useState([])
const onChange = (changes: AutocompleteChanges) => {
setSelectedItems(changes.selectedItems)
@@ -269,20 +266,20 @@ export const OnOptionsChange: Story> = (
return (
- Selected items:{selectedItems.map((x) => x.label).toString()}
+ Selected items:{selectedItems?.map((x) => x.label).toString()}
@@ -290,7 +287,7 @@ export const OnOptionsChange: Story> = (
)
}
-OnOptionsChange.args = {
+Controlled.args = {
options: stocks,
}
diff --git a/packages/eds-core-react/src/components/Autocomplete/Autocomplete.tsx b/packages/eds-core-react/src/components/Autocomplete/Autocomplete.tsx
index 29495a79f3..b8c3bb3f19 100644
--- a/packages/eds-core-react/src/components/Autocomplete/Autocomplete.tsx
+++ b/packages/eds-core-react/src/components/Autocomplete/Autocomplete.tsx
@@ -152,7 +152,7 @@ const findPrevIndex: IndexFinderType = ({
return prevIndex
}
-export type AutocompleteChanges = UseMultipleSelectionProps
+export type AutocompleteChanges = { selectedItems: T[] }
export type AutocompleteProps = {
/** List of options to choose from */
@@ -239,17 +239,24 @@ function AutocompleteInner(
: 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(
if (isControlled && !multiple) {
comboBoxProps = {
...comboBoxProps,
- selectedItem: selectedOptions[0],
+ selectedItem: selectedOptions[0] || null,
+ onSelectedItemChange: (changes) => {
+ if (onOptionsChange) {
+ const { selectedItem } = changes
+ onOptionsChange({ selectedItems: [selectedItem] })
+ }
+ },
}
}