diff --git a/packages/ffe-datepicker-react/src/datepicker/Datepicker.js b/packages/ffe-datepicker-react/src/datepicker/Datepicker.js
index 55cde65041..e5bac3f98e 100644
--- a/packages/ffe-datepicker-react/src/datepicker/Datepicker.js
+++ b/packages/ffe-datepicker-react/src/datepicker/Datepicker.js
@@ -40,7 +40,6 @@ export default class Datepicker extends Component {
this.globalClickHandler = this.globalClickHandler.bind(this);
this.escKeyHandler = this.escKeyHandler.bind(this);
this.datePickedHandler = this.datePickedHandler.bind(this);
- this.divBlurHandler = this.divBlurHandler.bind(this);
this.onInputKeydown = this.onInputKeydown.bind(this);
this.onInputBlur = this.onInputBlur.bind(this);
this.onError = this.onError.bind(this);
@@ -216,16 +215,6 @@ export default class Datepicker extends Component {
evt.nativeEvent.__datepickerID = this.datepickerId;
}
- divBlurHandler(evt) {
- const isBluringWithDisplayDatePickerFalse =
- evt.target === this.dateInputRef._input &&
- evt.currentTarget === this._datepickerNode &&
- !this.state.displayDatePicker;
- if (isBluringWithDisplayDatePickerFalse) {
- this.removeGlobalEventListeners();
- }
- }
-
datePickedHandler(date) {
this.props.onChange(date);
this.props.onValidationComplete(date);
@@ -294,6 +283,7 @@ export default class Datepicker extends Component {
fullWidth,
innerRef,
} = this.props;
+
const { minDate, maxDate } = this.state;
if (this.state.ariaInvalid && !inputProps['aria-describedby']) {
@@ -349,13 +339,7 @@ export default class Datepicker extends Component {
onBlur={this.onInputBlur}
onChange={evt => onChange(evt.target.value)}
onKeyDown={this.onInputKeydown}
- ref={c => {
- if (innerRef) {
- innerRef.current = c;
- }
-
- this.dateInputRef = c;
- }}
+ ref={innerRef}
value={value}
fullWidth={fullWidth}
language={language}
@@ -377,7 +361,6 @@ export default class Datepicker extends Component {
minDate={minDate}
onDatePicked={this.datePickedHandler}
selectedDate={this.state.calendarActiveDate}
- onBlurHandler={this.blurHandler}
ref={c => {
this.datepickerCalendar = c;
}}
@@ -404,7 +387,6 @@ Datepicker.defaultProps = {
keepDisplayStateOnError: false,
onValidationComplete: () => {},
fullWidth: false,
- innerRef: undefined,
};
Datepicker.propTypes = {
diff --git a/packages/ffe-datepicker-react/src/datepicker/Datepicker.spec.js b/packages/ffe-datepicker-react/src/datepicker/Datepicker.spec.js
index 93b5da11f5..2c93576d7a 100644
--- a/packages/ffe-datepicker-react/src/datepicker/Datepicker.spec.js
+++ b/packages/ffe-datepicker-react/src/datepicker/Datepicker.spec.js
@@ -496,7 +496,6 @@ describe('', () => {
});
const renderedWrapper = wrapper.instance();
- expect(renderedWrapper.dateInputRef._input).toBeTruthy();
expect(renderedWrapper._datepickerNode).toBeTruthy();
expect(renderedWrapper.datepickerCalendar).toBeFalsy();
renderedWrapper.openCalendar();
diff --git a/packages/ffe-datepicker-react/src/input/Input.js b/packages/ffe-datepicker-react/src/input/Input.js
index 90f07626a8..dec57d0e04 100644
--- a/packages/ffe-datepicker-react/src/input/Input.js
+++ b/packages/ffe-datepicker-react/src/input/Input.js
@@ -1,49 +1,37 @@
-import React, { Component } from 'react';
+import React from 'react';
import { bool, func, oneOfType, string, shape, oneOf } from 'prop-types';
import classNames from 'classnames';
import i18n from '../i18n/i18n';
-export default class Input extends Component {
- focus() {
- this._input.focus();
- }
+const Input = React.forwardRef((props, ref) => {
+ const {
+ ariaInvalid,
+ inputProps = {},
+ onBlur,
+ onChange,
+ onKeyDown,
+ value,
+ language = 'nb',
+ } = props;
- inputClassNames(extraClassNames) {
- return classNames(
- 'ffe-input-field ffe-dateinput__field',
- extraClassNames,
- );
- }
-
- render() {
- const {
- ariaInvalid,
- inputProps = {},
- onBlur,
- onChange,
- onKeyDown,
- value,
- language = 'nb',
- } = this.props;
-
- return (
- {
- this._input = c;
- }}
- aria-placeholder={i18n[language].DATE_FORMAT}
- value={value}
- {...inputProps}
- className={this.inputClassNames(inputProps.className)}
- />
- );
- }
-}
+ return (
+
+ );
+});
Input.propTypes = {
'aria-invalid': string,
@@ -58,3 +46,5 @@ Input.propTypes = {
fullWidth: bool,
language: oneOf(['nb', 'nn', 'en']),
};
+
+export default Input;