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;