feat(ffe-form-react): Add support for forwarding refs

BREAKING CHANGE: Requires react@^16.3 This commit adds support for forwarding refs to the `Input` and `TextArea` components, so consumers can handle focus programmatically.
SpareBank1 · Oct 2, 2018 · 43ad6fc · 43ad6fc
1 parent 4a7f9ce
commit 43ad6fc
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 15 deletions.
diff --git a/package.json b/package.json
@@ -46,8 +46,8 @@
         "coveralls": "^3.0.0",
         "cross-env": "^5.1.3",
         "css-loader": "^1.0.0",
-        "enzyme": "^3.3.0",
-        "enzyme-adapter-react-16": "^1.1.1",
+        "enzyme": "^3.6.0",
+        "enzyme-adapter-react-16": "^1.5.0",
         "eslint": "^5.3.0",
         "eslint-config-prettier": "^3.0.0",
         "glob": "^7.1.2",

diff --git a/packages/ffe-form-react/package.json b/packages/ffe-form-react/package.json
@@ -42,7 +42,7 @@
   "peerDependencies": {
     "@sb1/ffe-core": "^12.0.0 || ^13.0.0",
     "@sb1/ffe-form": "^9.0.0",
-    "react": "^16.2.0"
+    "react": "^16.3.0"
   },
   "publishConfig": {
     "access": "public"

diff --git a/packages/ffe-form-react/src/Input.js b/packages/ffe-form-react/src/Input.js
@@ -2,7 +2,8 @@ import React from 'react';
 import { bool, string } from 'prop-types';
 import classNames from 'classnames';
 
-const Input = ({ className, inline, textLike, ...rest }) => {
+const Input = React.forwardRef((props, ref) => {
+    const { className, inline, textLike, ...rest } = props;
     return (
         <input
             className={classNames(
@@ -11,10 +12,11 @@ const Input = ({ className, inline, textLike, ...rest }) => {
                 { 'ffe-input-field--text-like': textLike },
                 className,
             )}
+            ref={ref}
             {...rest}
         />
     );
-};
+});
 
 Input.propTypes = {
     className: string,

diff --git a/packages/ffe-form-react/src/InputGroup.spec.js b/packages/ffe-form-react/src/InputGroup.spec.js
@@ -21,7 +21,7 @@ describe('<InputGroup>', () => {
 
     it('renders the given child', () => {
         const wrapper = getWrapper();
-        expect(wrapper.find('Input')).toHaveLength(1);
+        expect(wrapper.find(Input)).toHaveLength(1);
     });
 
     it('renders a Label if a string passed from the label prop', () => {
@@ -37,7 +37,7 @@ describe('<InputGroup>', () => {
     it('renders a Label with htmlFor set to the same value of the children id', () => {
         const wrapper = getWrapper();
 
-        const inputId = wrapper.find('Input').prop('id');
+        const inputId = wrapper.find(Input).prop('id');
         expect(wrapper.find('Label').prop('htmlFor')).toBe(inputId);
     });
 
@@ -53,7 +53,7 @@ describe('<InputGroup>', () => {
         expect(wrapper.find('ErrorFieldMessage').prop('children')).toBe(
             'such error',
         );
-        expect(wrapper.find('Input').prop('aria-invalid')).toBe('true');
+        expect(wrapper.find(Input).prop('aria-invalid')).toBe('true');
     });
 
     it('renders a Label component if passed a label prop', () => {
@@ -80,7 +80,7 @@ describe('<InputGroup>', () => {
         expect(wrapper.find('ErrorFieldMessage').prop('children')).toBe(
             'Some error',
         );
-        expect(wrapper.find('Input').prop('aria-invalid')).toBe('true');
+        expect(wrapper.find(Input).prop('aria-invalid')).toBe('true');
     });
 
     it('renders a SuccessFieldMessage if passed as fieldMessage prop', () => {
@@ -94,7 +94,7 @@ describe('<InputGroup>', () => {
         expect(wrapper.find('SuccessFieldMessage').prop('children')).toBe(
             'Some success',
         );
-        expect(wrapper.find('Input').prop('aria-invalid')).toBe('false');
+        expect(wrapper.find(Input).prop('aria-invalid')).toBe('false');
     });
 
     it('throws error when receiving multiple children', () => {
@@ -146,8 +146,9 @@ describe('<InputGroup>', () => {
                 </div>
             ),
         });
-        expect(wrapper.find('Input').prop('id')).toHaveLength(42);
-        expect(wrapper.find('Input').prop('aria-invalid')).toBe('false');
+
+        expect(wrapper.find(Input).prop('id')).toHaveLength(42);
+        expect(wrapper.find(Input).prop('aria-invalid')).toBe('false');
     });
 
     it('renders a static tooltip if description is set', () => {

diff --git a/packages/ffe-form-react/src/TextArea.js b/packages/ffe-form-react/src/TextArea.js
@@ -2,11 +2,16 @@ import React from 'react';
 import { string } from 'prop-types';
 import classNames from 'classnames';
 
-const TextArea = ({ className, ...rest }) => {
+const TextArea = React.forwardRef((props, ref) => {
+    const { className, ...rest } = props;
     return (
-        <textarea className={classNames('ffe-textarea', className)} {...rest} />
+        <textarea
+            className={classNames('ffe-textarea', className)}
+            ref={ref}
+            {...rest}
+        />
     );
-};
+});
 
 TextArea.propTypes = {
     className: string,