diff --git a/packages/ffe-form-react/package.json b/packages/ffe-form-react/package.json
index 5da72eb26c..21c0fc8cb1 100644
--- 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
index 3ca35cbc61..ebcc3ab734 100644
--- 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 (
{
{ '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
index 19cbeb32df..15f96f39e0 100644
--- a/packages/ffe-form-react/src/InputGroup.spec.js
+++ b/packages/ffe-form-react/src/InputGroup.spec.js
@@ -21,7 +21,7 @@ describe('', () => {
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('', () => {
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('', () => {
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('', () => {
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('', () => {
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('', () => {
),
});
- 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
index 6f2d01eaf4..4f35a0a424 100644
--- 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.propTypes = {
className: string,