fix(fuselage,regression): MultiSelect errors (#651)

* Fix `forwardRef` detection * Handle addon click without DOM access * Avoid calling undefined `onSelect`
RocketChat · Feb 17, 2022 · b3b075b · b3b075b
1 parent 74c0089
commit b3b075b
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 27 deletions.
diff --git a/packages/fuselage/package.json b/packages/fuselage/package.json
@@ -56,7 +56,6 @@
     "@rocket.chat/fuselage-tokens": "workspace:~",
     "@rocket.chat/memo": "workspace:~",
     "invariant": "^2.2.4",
-    "react-is": "~17.0.2",
     "react-keyed-flatten-children": "^1.3.0"
   },
   "devDependencies": {
@@ -82,7 +81,6 @@
     "@testing-library/react": "^12.1.2",
     "@types/invariant": "^2.2.35",
     "@types/jest": "~27.4.0",
-    "@types/react-is": "^17",
     "autoprefixer": "~10.4.2",
     "babel-loader": "~8.2.3",
     "caniuse-lite": "~1.0.30001311",

diff --git a/packages/fuselage/src/components/MultiSelect/MultiSelect.js b/packages/fuselage/src/components/MultiSelect/MultiSelect.js
@@ -1,11 +1,7 @@
-import {
-  useMergedRefs,
-  useMutableCallback,
-  useResizeObserver,
-} from '@rocket.chat/fuselage-hooks';
+import { useMergedRefs, useResizeObserver } from '@rocket.chat/fuselage-hooks';
 import React, { useState, useRef, useEffect, memo, forwardRef } from 'react';
-import { isForwardRef } from 'react-is';
 
+import { isForwardRefType } from '../../helpers/isForwardRefType';
 import AnimatedVisibility from '../AnimatedVisibility';
 import { Box } from '../Box';
 import Chip from '../Chip';
@@ -57,7 +53,7 @@ export const MultiSelect = forwardRef(function MultiSelect(
     }
     const newValue = [...internalValue, value];
     setInternalValue(newValue);
-    onSelect();
+    onSelect?.();
     return onChange(newValue);
   };
 
@@ -80,14 +76,17 @@ export const MultiSelect = forwardRef(function MultiSelect(
 
   const { ref: containerRef, borderBoxSize } = useResizeObserver();
 
-  const handleClick = useMutableCallback((e) => {
-    if (e.target.tagName !== 'I') {
-      innerRef.current?.focus();
-    }
+  const handleClick = () => {
+    innerRef.current?.focus();
     return visible === AnimatedVisibility.VISIBLE ? hide() : show();
-  });
+  };
+
+  const handleAddonClick = (e) => {
+    e.stopPropagation();
+    return visible === AnimatedVisibility.VISIBLE ? hide() : show();
+  };
 
-  const renderAnchor = isForwardRef(Anchor)
+  const renderAnchor = isForwardRefType(Anchor)
     ? (params) => <Anchor {...params} />
     : Anchor;
 
@@ -152,6 +151,7 @@ export const MultiSelect = forwardRef(function MultiSelect(
                   : 'chevron-down'
               }
               size='x20'
+              onClick={handleAddonClick}
             />
           </SelectAddon>
         </Margins>

diff --git a/packages/fuselage/src/helpers/isForwardRefType.ts b/packages/fuselage/src/helpers/isForwardRefType.ts
@@ -0,0 +1,6 @@
+import { ForwardRefExoticComponent } from 'react';
+
+export const isForwardRefType = <P = any>(
+  type: any
+): type is ForwardRefExoticComponent<P> =>
+  type.$$typeof === Symbol.for('react.forward_ref');
diff --git a/yarn.lock b/yarn.lock
@@ -5669,7 +5669,6 @@ __metadata:
     "@testing-library/react": ^12.1.2
     "@types/invariant": ^2.2.35
     "@types/jest": ~27.4.0
-    "@types/react-is": ^17
     autoprefixer: ~10.4.2
     babel-loader: ~8.2.3
     caniuse-lite: ~1.0.30001311
@@ -5697,7 +5696,6 @@ __metadata:
     prettier: ~2.5.1
     react: ^17.0.2
     react-dom: ^17.0.2
-    react-is: ~17.0.2
     react-keyed-flatten-children: ^1.3.0
     react-virtuoso: ~2.6.0
     rimraf: ^3.0.2
@@ -7957,15 +7955,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/react-is@npm:^17":
-  version: 17.0.3
-  resolution: "@types/react-is@npm:17.0.3"
-  dependencies:
-    "@types/react": "*"
-  checksum: 6abb7c47d54f012272650df8a962a28bd82f219291e5ef8b4dfa7fe0bb98ae243b060bf9fbe8ceff6213141794855a006db194b490b00ffd15842ae19d0ce1f0
-  languageName: node
-  linkType: hard
-
 "@types/react-syntax-highlighter@npm:11.0.5":
   version: 11.0.5
   resolution: "@types/react-syntax-highlighter@npm:11.0.5"
@@ -22668,7 +22657,7 @@ fsevents@~2.1.2:
   languageName: node
   linkType: hard
 
-"react-is@npm:17.0.2, react-is@npm:^17.0.2, react-is@npm:~17.0.2":
+"react-is@npm:17.0.2, react-is@npm:^17.0.2":
   version: 17.0.2
   resolution: "react-is@npm:17.0.2"
   checksum: 9d6d111d8990dc98bc5402c1266a808b0459b5d54830bbea24c12d908b536df7883f268a7868cfaedde3dd9d4e0d574db456f84d2e6df9c4526f99bb4b5344d8