feat(ffe-form-react): Pass refs for input and textarea

BREAKING CHANGE: Requires React 16.3.0 and above!

This commit lets the consumer pass refs down to the `Input` and
`TextArea` components, to handle focus et al.

The only breaking change is the fact that React 16.3.0 is required.

Fixes #231.

packages/ffe-form-react/package.json

@@ -42,7 +42,7 @@
   "peerDependencies": {
     "@sb1/ffe-core": "^12.0.0",
     "@sb1/ffe-form": "^9.0.0",
-    "react": "^16.2.0"
+    "react": "^16.3.0"
   },
   "publishConfig": {
     "access": "public"

packages/ffe-form-react/src/Input.js

@@ -1,8 +1,9 @@
-import React from 'react';
+import React, { forwardRef } from 'react';
 import { bool, string } from 'prop-types';
 import classNames from 'classnames';
 
-const Input = ({ className, inline, textLike, ...rest }) => {
+const Input = forwardRef((props, ref) => {
+    const { className, inline, textLike, ...rest } = props;
     return (
         <input
             className={classNames(
@@ -12,6 +13,7 @@ const Input = ({ className, inline, textLike, ...rest }) => {
                 className,
             )}
             {...rest}
+            ref={ref}
         />
     );
 };

packages/ffe-form-react/src/TextArea.js

@@ -1,12 +1,17 @@
-import React from 'react';
+import React, { forwardRef } from 'react';
 import { string } from 'prop-types';
 import classNames from 'classnames';
 
-const TextArea = ({ className, ...rest }) => {
+const TextArea = forwardRef((props, ref) => {
+    const { className, ...rest } = props;
     return (
-        <textarea className={classNames('ffe-textarea', className)} {...rest} />
+        <textarea
+            className={classNames('ffe-textarea', className)}
+            {...rest}
+            ref={ref}
+        />
     );
-};
+});
 
 TextArea.propTypes = {
     className: string,