fix(refs): allow NumericInput component to take a ref prop

wKovacs64 · Apr 23, 2019 · 203d143 · 203d143
1 parent ee4e23d
commit 203d143
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 5 deletions.
diff --git a/package.json b/package.json
@@ -40,6 +40,7 @@
   "dependencies": {
     "@emotion/core": "10.0.10",
     "@emotion/styled": "10.0.10",
+    "@quid/merge-refs": "1.38.1",
     "@wkovacs64/normalize.css": "8.0.1",
     "currency.js": "1.2.1",
     "gatsby": "2.3.25",

diff --git a/src/@types/quid__merge-refs.d.ts b/src/@types/quid__merge-refs.d.ts
@@ -0,0 +1 @@
+declare module '@quid/merge-refs';
diff --git a/src/components/numeric-input.tsx b/src/components/numeric-input.tsx
@@ -1,16 +1,18 @@
 import React from 'react';
+import mergeRefs from '@quid/merge-refs';
 import NumberInput from '../styles/number-input';
 
-const NumericInput: React.FunctionComponent<
-  React.InputHTMLAttributes<HTMLInputElement>
-> = props => {
+const NumericInput = React.forwardRef<
+  HTMLInputElement,
+  React.ComponentPropsWithRef<typeof NumberInput>
+>((props, userRef) => {
   const ref = React.useRef<HTMLInputElement>(null);
 
   return (
     <NumberInput
       type="text"
       inputMode="numeric"
-      ref={ref}
+      ref={mergeRefs(ref, userRef)}
       onKeyDown={e => {
         if (e.keyCode === 13 && ref && ref.current) {
           ref.current.blur();
@@ -20,6 +22,6 @@ const NumericInput: React.FunctionComponent<
       {...props}
     />
   );
-};
+});
 
 export default NumericInput;
diff --git a/yarn.lock b/yarn.lock
@@ -1480,6 +1480,11 @@
     string-width "^2.0.0"
     strip-ansi "^3"
 
+"@quid/merge-refs@1.38.1":
+  version "1.38.1"
+  resolved "https://registry.yarnpkg.com/@quid/merge-refs/-/merge-refs-1.38.1.tgz#eea1e94066726f07d1bdf8ea07aae0e21f2b228b"
+  integrity sha512-ZmNE8DTcia8eNqDnrz9O/unKXVXRwCYuopG6ervXV6WUBGohz8q3fRn45GiiySXS1+gmzPWp8BjE2sMJr+pRZg==
+
 "@reach/router@^1.1.1":
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/@reach/router/-/router-1.2.1.tgz#34ae3541a5ac44fa7796e5506a5d7274a162be4e"