fix(ffe-datepicker-react): innerRef was not set

SpareBank1 · Mar 5, 2024 · da03061 · da03061
1 parent fc3a258
commit da03061
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 62 deletions.
diff --git 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
@@ -496,7 +496,6 @@ describe('<Datepicker />', () => {
             });
 
             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
@@ -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 (
-            <input
-                aria-invalid={String(this.props['aria-invalid'] || ariaInvalid)}
-                maxLength="10"
-                onBlur={onBlur}
-                onChange={onChange}
-                onKeyDown={onKeyDown}
-                ref={c => {
-                    this._input = c;
-                }}
-                aria-placeholder={i18n[language].DATE_FORMAT}
-                value={value}
-                {...inputProps}
-                className={this.inputClassNames(inputProps.className)}
-            />
-        );
-    }
-}
+    return (
+        <input
+            aria-invalid={String(props['aria-invalid'] || ariaInvalid)}
+            maxLength="10"
+            onBlur={onBlur}
+            onChange={onChange}
+            onKeyDown={onKeyDown}
+            ref={ref}
+            aria-placeholder={i18n[language].DATE_FORMAT}
+            value={value}
+            {...inputProps}
+            className={classNames(
+                'ffe-input-field ffe-dateinput__field',
+                inputProps.className,
+            )}
+        />
+    );
+});
 
 Input.propTypes = {
     'aria-invalid': string,
@@ -58,3 +46,5 @@ Input.propTypes = {
     fullWidth: bool,
     language: oneOf(['nb', 'nn', 'en']),
 };
+
+export default Input;