📝 Updated docs for controlled state

equinor · Jun 15, 2022 · 02574b6 · 02574b6
1 parent d905b16
commit 02574b6
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 12 deletions.
diff --git 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) 
 
 <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 handles when a component is controlled or not](https://github.com/downshift-js/downshift#control-props).
+<Story id="inputs-autocomplete--controlled" />
 
 ## 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
@@ -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,
 }