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 ( -