fix(MultiSelect): handle case of MultiSelect with initialSelectedItems (

carbon-design-system#761) * fix(MultiSelect): handle case of MultiSelect with initialSelectedItems, resolves carbon-design-system#707 * test(MultiSelect): add scenario of initialStelectedItems * fix(MultiSelect): handle case of MultiSelect with initialSelectedItems, resolves carbon-design-system#707
joshblack · Apr 9, 2018 · 63b22bc · 63b22bc
1 parent 61376a0
commit 63b22bc
Show file tree

Hide file tree

Showing 2 changed files with 72 additions and 13 deletions.
diff --git a/src/components/MultiSelect/__tests__/MultiSelect-test.js b/src/components/MultiSelect/__tests__/MultiSelect-test.js
@@ -55,6 +55,78 @@ describe('MultiSelect', () => {
     });
   });
 
+  describe('MultiSelect with InitialSelectedItems', () => {
+    let mockProps;
+    const items = generateItems(5, generateGenericItem);
+
+    beforeEach(() => {
+      mockProps = {
+        items: items,
+        initialSelectedItems: [items[0], items[1], items[2]],
+        itemToString: ({ label }) => label,
+        onChange: jest.fn(),
+        label: 'Label',
+      };
+    });
+
+    it('should allow a user to de-select an item by clicking on a initial selected items', () => {
+      const wrapper = mount(<MultiSelect {...mockProps} />);
+      expect(
+        wrapper.find('Selection').instance().state.selectedItems.length
+      ).toBe(3);
+
+      wrapper.find('.bx--list-box__field').simulate('click');
+      wrapper
+        .find('.bx--list-box__menu-item')
+        .at(0)
+        .simulate('click');
+
+      expect(
+        wrapper.find('Selection').instance().state.selectedItems.length
+      ).toBe(2);
+    });
+
+    it('should allow a user to de-select an initial selected item by hitting enter on ainitial selected item', () => {
+      const wrapper = mount(<MultiSelect {...mockProps} />);
+      const simulateArrowDown = wrapper =>
+        wrapper.find('.bx--list-box__field').simulate('keydown', {
+          key: 'ArrowDown',
+        });
+
+      expect(
+        wrapper.find('Selection').instance().state.selectedItems.length
+      ).toBe(3);
+      openMenu(wrapper);
+      simulateArrowDown(wrapper);
+      wrapper
+        .find('.bx--list-box__field')
+        .at(0)
+        .simulate('keydown', {
+          key: 'Enter',
+        });
+      expect(
+        wrapper.find('Selection').instance().state.selectedItems.length
+      ).toBe(2);
+    });
+
+    it('should select an item when a user clicks on an item', () => {
+      const wrapper = mount(<MultiSelect {...mockProps} />);
+      expect(
+        wrapper.find('Selection').instance().state.selectedItems.length
+      ).toBe(3);
+
+      wrapper.find('.bx--list-box__field').simulate('click');
+      wrapper
+        .find('.bx--list-box__menu-item')
+        .at(4)
+        .simulate('click');
+
+      expect(
+        wrapper.find('Selection').instance().state.selectedItems.length
+      ).toBe(4);
+    });
+  });
+
   describe('e2e', () => {
     let mockProps;
 

diff --git a/src/internal/Selection.js b/src/internal/Selection.js
@@ -17,19 +17,6 @@ export default class Selection extends React.Component {
     };
   }
 
-  componentWillReceiveProps(nextProps) {
-    const { selectedItems } = this.state;
-    const itemsToAdd = nextProps.initialSelectedItems.filter(item => {
-      return selectedItems.indexOf(item) === -1;
-    });
-
-    if (itemsToAdd.length > 0) {
-      this.setState(state => ({
-        selectedItems: state.selectedItems.concat(itemsToAdd),
-      }));
-    }
-  }
-
   internalSetState = (stateToSet, callback) =>
     this.setState(stateToSet, () => {
       if (callback) {