MultiSelect can be used as a controlled component (#156) (#160)

kenshoo · Jul 23, 2019 · 01e6017 · 01e6017
1 parent e763c1a
commit 01e6017
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 2 deletions.
diff --git a/src/components/multi_select_state.js b/src/components/multi_select_state.js
@@ -49,7 +49,10 @@ const withMultiSelectState = WrappedComponent =>
     componentWillReceiveProps(nextProps) {
       const { searchValue, searchSelectedItemsValue } = this.props;
       if (this.props.selectedItems !== nextProps.selectedItems) {
-        this.setState({ selectedItems: nextProps.selectedItems });
+        this.setState({
+          selectedItems: nextProps.selectedItems,
+          filteredSelectedItems: nextProps.selectedItems
+        });
       }
       if (this.props.items !== nextProps.items) {
         const { items } = nextProps;
@@ -101,7 +104,6 @@ const withMultiSelectState = WrappedComponent =>
     componentDidMount() {
       window.addEventListener("keyup", this.onKeyUp);
     }
-
     componentWillUnmount() {
       window.removeEventListener("keyup", this.onKeyUp, false);
     }

diff --git a/stories/multi-select.stories.js b/stories/multi-select.stories.js
@@ -357,4 +357,50 @@ storiesOf("React Multi Select", module)
         />
       );
     })
+  )
+  .add(
+    "As a controlled component",
+    withReadme(Readme, () => {
+      class SelectedItemsController extends React.Component {
+        SINGLE_ITEM = [{ id: 1, label: "Item 1" }];
+        MULTI_ITEMS = [
+          { id: 2, label: "Item 2" },
+          { id: 4, label: "Item 4" }
+        ]
+
+        constructor(props) {
+          super(props);
+          this.state = {
+            selectedItems: this.SINGLE_ITEM,
+          };
+        }
+
+        render() {
+          return (
+            <React.Fragment>
+              <input
+                style={{ marginBottom: "10px" }}
+                value="set Selected Items from outside"
+                type="button"
+                onClick={() => {
+                  this.setState({
+                    selectedItems: this.state.selectedItems.length > 1 ? this.SINGLE_ITEM : this.MULTI_ITEMS
+                  });
+                }}
+              />
+              <ReactMultiSelect
+                items={utils.items}
+                selectedItems={this.state.selectedItems}
+                loading={boolean("Loading", false)}
+                onChange={action("onChange")}
+                showSearch={boolean("Show search", true)}
+                showSelectAll={boolean("Show select all", true)}
+              />
+            </React.Fragment>
+          );
+        }
+      }
+
+      return <SelectedItemsController />;
+    })
   );