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] }) + } + }, } }