Fix incorrect selected state

Shopify · Feb 27, 2019 · 89b9770 · 89b9770
1 parent 77f1276
commit 89b9770
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 18 deletions.
diff --git a/UNRELEASED.md b/UNRELEASED.md
@@ -25,6 +25,7 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f
 - Added accessibility documentation for `InlineError` ([#1073](https://github.com/Shopify/polaris-react/pull/1073))
 - Added accessibility documentation for `Loading`([#1075](https://github.com/Shopify/polaris-react/pull/1075))
 - Fixed documentation about the `ariaPressed` prop for `Button` ([#1097](https://github.com/Shopify/polaris-react/pull/1097))
+- Fixed examples using the `selected` prop for `Autocomplete` ([#1053](https://github.com/Shopify/polaris-react/pull/1053))
 
 ### Development workflow
 

diff --git a/src/components/Autocomplete/README.md b/src/components/Autocomplete/README.md
@@ -98,14 +98,14 @@ class AutocompleteExample extends React.Component {
     });
   };
 
-  updateSelection = (updatedSelection) => {
-    const selectedText = updatedSelection.map((selectedItem) => {
-      const matchedOption = this.options.filter((option) => {
+  updateSelection = (selected) => {
+    const selectedText = selected.map((selectedItem) => {
+      const matchedOption = this.options.find((option) => {
         return option.value.match(selectedItem);
       });
-      return matchedOption[0] && matchedOption[0].label;
+      return matchedOption && matchedOption.label;
     });
-    this.setState({selected: selectedText, inputText: selectedText});
+    this.setState({selected, inputText: selectedText});
   };
 }
 ```
@@ -202,9 +202,7 @@ class MultiAutocompleteExample extends React.Component {
     });
   };
 
-  updateSelection = (updatedSelection) => {
-    this.setState({selected: updatedSelection});
-  };
+  updateSelection = (selected) => this.setState({selected});
 }
 
 function titleCase(string) {
@@ -291,14 +289,14 @@ class AutocompleteExample extends React.Component {
     }, 300);
   };
 
-  updateSelection = (updatedSelection) => {
-    const selectedText = updatedSelection.map((selectedItem) => {
-      const matchedOption = this.options.filter((option) => {
+  updateSelection = (selected) => {
+    const selectedText = selected.map((selectedItem) => {
+      const matchedOption = this.options.find((option) => {
         return option.value.match(selectedItem);
       });
-      return matchedOption[0] && matchedOption[0].label;
+      return matchedOption && matchedOption.label;
     });
-    this.setState({selected: selectedText, inputText: selectedText});
+    this.setState({selected, inputText: selectedText});
   };
 }
 ```
@@ -385,14 +383,14 @@ class AutocompleteExample extends React.Component {
     }, 300);
   };
 
-  updateSelection = (updatedSelection) => {
-    const selectedText = updatedSelection.map((selectedItem) => {
-      const matchedOption = this.options.filter((option) => {
+  updateSelection = (selected) => {
+    const selectedText = selected.map((selectedItem) => {
+      const matchedOption = this.options.find((option) => {
         return option.value.match(selectedItem);
       });
-      return matchedOption[0] && matchedOption[0].label;
+      return matchedOption && matchedOption.label;
     });
-    this.setState({selected: selectedText, inputText: selectedText});
+    this.setState({selected, inputText: selectedText});
   };
 }
 ```