Repository: laboratoriobridge/bold
Pull request #486 (2019-10-11 13:47:11)

Fix Select multiple error when filter is cleared


Patch:
diff --git a/package.json b/package.json
index 6ca31193e..9ca1bfa9a 100644
--- a/package.json
+++ b/package.json
@@ -55,14 +55,12 @@
     "downshift": "3.3.4",
     "emotion": "10.0.17",
     "focus-trap-react": "6.0.0",
-    "hoist-non-react-statics": "3.3.0",
     "match-sorter": "4.0.2",
     "react-dropzone": "10.1.10",
     "react-popper": "1.3.4",
     "react-text-mask": "5.4.3",
     "react-transition-group": "4.3.0",
-    "text-mask-addons": "3.8.0",
-    "text-mask-core": "5.1.2"
+    "text-mask-addons": "3.8.0"
   },
   "devDependencies": {
     "@babel/core": "7.6.3",
diff --git a/src/components/Select/SelectMulti/MultiDownshift.tsx b/src/components/Select/SelectMulti/MultiDownshift.tsx
index 4734f664c..6eafc5bbb 100644
--- a/src/components/Select/SelectMulti/MultiDownshift.tsx
+++ b/src/components/Select/SelectMulti/MultiDownshift.tsx
@@ -42,10 +42,12 @@ export function MultiDownshift<T>(props: MultiDownshiftProps<T>) {
   const isSelected = (item: T) => some(selectedItems, i => props.itemIsEqual(i, item))
 
   const handleChange = (selectedItem: T) => {
-    if (isSelected(selectedItem)) {
-      removeItem(selectedItem)
-    } else {
-      addItem(selectedItem)
+    if (selectedItem) {
+      if (isSelected(selectedItem)) {
+        removeItem(selectedItem)
+      } else {
+        addItem(selectedItem)
+      }
     }
   }
 
@@ -89,7 +91,7 @@ MultiDownshift.defaultProps = {
     if (process.env.NODE_ENV !== 'production') {
       // tslint:disable no-console
       console.warn(
-        'MultiDownshift: using default itemIsEqual implementation for object comparision.' +
+        'MultiDownshift: using a deep compare itemIsEqual implementation for object comparision.' +
           ' You should probably provide your own `itemIsEqual` implementation.'
       )
     }
diff --git a/yarn.lock b/yarn.lock
index af974c820..efdcfd515 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6678,7 +6678,7 @@ hmac-drbg@^1.0.0:
     minimalistic-assert "^1.0.0"
     minimalistic-crypto-utils "^1.0.1"
 
-hoist-non-react-statics@3.3.0, hoist-non-react-statics@^3.2.1, hoist-non-react-statics@^3.3.0:
+hoist-non-react-statics@^3.2.1, hoist-non-react-statics@^3.3.0:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.0.tgz#b09178f0122184fb95acf525daaecb4d8f45958b"
   integrity sha512-0XsbTXxgiaCDYDIWFcwkmerZPSwywfUqYmwT4jzewKTQSWoE6FCMoUVOeBJWK3E/CrWbxRG3m5GzY4lnIwGRBA==
@@ -12483,11 +12483,6 @@ text-mask-addons@3.8.0:
   resolved "https://registry.yarnpkg.com/text-mask-addons/-/text-mask-addons-3.8.0.tgz#17b61ef665a4f36811f2ea1f01a223b4be61ab26"
   integrity sha1-F7Ye9mWk82gR8uofAaIjtL5hqyY=
 
-text-mask-core@5.1.2:
-  version "5.1.2"
-  resolved "https://registry.yarnpkg.com/text-mask-core/-/text-mask-core-5.1.2.tgz#80dd5ebe04825757e46619e691407a9f8b3c1b6f"
-  integrity sha1-gN1evgSCV1fkZhnmkUB6n4s8G28=
-
 text-table@0.2.0, text-table@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"


Test patch:
diff --git a/src/components/Select/SelectMulti/SelectMulti.test.tsx b/src/components/Select/SelectMulti/SelectMulti.test.tsx
index 714d0c5a7..2f30313c2 100644
--- a/src/components/Select/SelectMulti/SelectMulti.test.tsx
+++ b/src/components/Select/SelectMulti/SelectMulti.test.tsx
@@ -77,6 +77,14 @@ it('should show placeholder only if selected items is empty', () => {
   expect(input.placeholder).toEqual('')
 })
 
+it('should not call onChange when filter is typed and cleared', () => {
+  const change = jest.fn()
+  const { container } = render(<SelectTest onChange={change} />)
+  fireEvent.change(container.querySelector('input'), { target: { value: 'app' } })
+  fireEvent.change(container.querySelector('input'), { target: { value: '' } })
+  expect(change).not.toHaveBeenCalled()
+})
+
 describe('remove item', () => {
   it('should call onChange with the new value', () => {
     const onChange = jest.fn()
diff --git a/src/components/Select/SelectMulti/__snapshots__/MultiDownshift.test.tsx.snap b/src/components/Select/SelectMulti/__snapshots__/MultiDownshift.test.tsx.snap
index 1c0ffc8c2..b636677f7 100644
--- a/src/components/Select/SelectMulti/__snapshots__/MultiDownshift.test.tsx.snap
+++ b/src/components/Select/SelectMulti/__snapshots__/MultiDownshift.test.tsx.snap
@@ -2,6 +2,6 @@
 
 exports[`itemIsEqual should emit a console warning when using the default itemIsEqual prop 1`] = `
 Array [
-  "MultiDownshift: using default itemIsEqual implementation for object comparision. You should probably provide your own \`itemIsEqual\` implementation.",
+  "MultiDownshift: using a deep compare itemIsEqual implementation for object comparision. You should probably provide your own \`itemIsEqual\` implementation.",
 ]
 `;
diff --git a/src/components/Select/SelectMulti/__snapshots__/SelectMulti.test.tsx.snap b/src/components/Select/SelectMulti/__snapshots__/SelectMulti.test.tsx.snap
index 5f6e6bed4..186a93315 100644
--- a/src/components/Select/SelectMulti/__snapshots__/SelectMulti.test.tsx.snap
+++ b/src/components/Select/SelectMulti/__snapshots__/SelectMulti.test.tsx.snap
@@ -122,7 +122,7 @@ exports[`input label label should have a htmlFor prop equals to the used id 1`]
     <div
       aria-expanded="false"
       aria-haspopup="listbox"
-      aria-labelledby="downshift-12-label"
+      aria-labelledby="downshift-13-label"
       role="combobox"
     >
       <div
@@ -132,7 +132,7 @@ exports[`input label label should have a htmlFor prop equals to the used id 1`]
           aria-autocomplete="list"
           autocomplete="off"
           class="emotion-1"
-          id="downshift-12-input"
+          id="downshift-13-input"
           placeholder="Select a value..."
           type="text"
           value=""
@@ -279,7 +279,7 @@ exports[`input label should use aria-labelledby equals to an auto-assigned label
           aria-labelledby="label-abc"
           autocomplete="off"
           class="emotion-1"
-          id="downshift-13-input"
+          id="downshift-14-input"
           placeholder="Select a value..."
           type="text"
           value=""