Fix useRef usage with TextInput

Relates to #743.
thumbtack · Dec 10, 2020 · 5080fb6 · 5080fb6
1 parent bddd0fb
commit 5080fb6
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 15 deletions.
diff --git a/packages/thumbprint-react/CHANGELOG.md b/packages/thumbprint-react/CHANGELOG.md
@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### Fixed
+
+-   [Patch] `TextInput` component's `ref` now works with `useRef`. (#743)
+
 ## 14.3.3 - 2020-11-19
 
 ### Fixed

diff --git a/packages/thumbprint-react/components/TextInput/index.tsx b/packages/thumbprint-react/components/TextInput/index.tsx
@@ -1,5 +1,6 @@
-import React, { useState } from 'react';
+import React, { useRef } from 'react';
 import classNames from 'classnames';
+import mergeRefs from 'react-merge-refs';
 import { InputRowContext } from '../InputRow/index';
 import styles from './index.module.scss';
 
@@ -295,13 +296,11 @@ const TextInput = React.forwardRef<HTMLInputElement, TextInputPropTypes>(
         outerRef,
     ): JSX.Element => {
         const uiState = getUIState({ isDisabled, isReadOnly, hasError });
-        // The input element rendered by this component. We use `useState` instead of
-        // `useRef` because callback refs allow us to add more than one `ref` to a DOM node.
-        const [inputEl, setInputEl] = useState<HTMLInputElement | null>(null);
+        const innerRef = useRef<HTMLInputElement>();
 
         const focusInput = (): void => {
-            if (inputEl) {
-                inputEl.focus();
+            if (innerRef.current) {
+                innerRef.current.focus();
             }
         };
 
@@ -356,15 +355,7 @@ const TextInput = React.forwardRef<HTMLInputElement, TextInputPropTypes>(
                     onKeyUp={(e): void => onKeyUp(e)}
                     onKeyPress={(e): void => onKeyPress(e)}
                     id={id}
-                    ref={(el): void => {
-                        setInputEl(el);
-
-                        // `outerRef` is the potential forwarded `ref` passed in from a consumer.
-                        // Not all refs are callable functions, so only try and call it if it is.
-                        if (typeof outerRef === 'function') {
-                            outerRef(el);
-                        }
-                    }}
+                    ref={mergeRefs([innerRef, outerRef])}
                     data-test={dataTest}
                     inputMode={inputMode}
                     pattern={pattern}

diff --git a/packages/thumbprint-react/components/TextInput/test.tsx b/packages/thumbprint-react/components/TextInput/test.tsx
@@ -254,6 +254,19 @@ describe('TextInput', () => {
         expect(wrapper.find('input').prop('maxLength')).toEqual(5);
         expect(wrapper).toMatchSnapshot();
     });
+
+    test('works with `useRef`', () => {
+        let ref: React.RefObject<HTMLInputElement> | null = null;
+
+        const TestComponent = (): React.ReactElement => {
+            ref = React.useRef<HTMLInputElement>(null);
+            return <TextInput ref={ref} onChange={noop} />;
+        };
+
+        mount(<TestComponent />);
+
+        expect(ref && ref.current).toBeTruthy();
+    });
 });
 
 describe('TextInputClearButton', () => {

diff --git a/packages/thumbprint-react/package.json b/packages/thumbprint-react/package.json
@@ -47,6 +47,7 @@
         "object-fit-images": "^3.2.4",
         "react-day-picker": "7.3.2",
         "react-displace": "^2.3.0",
+        "react-merge-refs": "^1.1.0",
         "react-onclickoutside": "^6.4.0",
         "react-popper": "^1.0.0",
         "react-swipeable": "^4.3.0",

diff --git a/yarn.lock b/yarn.lock
@@ -16917,6 +16917,11 @@ react-live@^2.2.0:
     react-simple-code-editor "^0.9.0"
     unescape "^0.2.0"
 
+react-merge-refs@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/react-merge-refs/-/react-merge-refs-1.1.0.tgz#73d88b892c6c68cbb7a66e0800faa374f4c38b06"
+  integrity sha512-alTKsjEL0dKH/ru1Iyn7vliS2QRcBp9zZPGoWxUOvRGWPUYgjo+V01is7p04It6KhgrzhJGnIj9GgX8W4bZoCQ==
+
 react-onclickoutside@^6.4.0:
   version "6.7.1"
   resolved "https://registry.yarnpkg.com/react-onclickoutside/-/react-onclickoutside-6.7.1.tgz#6a5b5b8b4eae6b776259712c89c8a2b36b17be93"