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

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

Hide file tree

Showing 2 changed files with 36 additions and 60 deletions.
diff --git a/packages/ffe-datepicker-react/src/datepicker/Datepicker.js b/packages/ffe-datepicker-react/src/datepicker/Datepicker.js
@@ -40,10 +40,10 @@ 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);
+        this.dateInputRef = props.innerRef ?? React.createRef();
     }
 
     buttonRef = React.createRef();
@@ -216,16 +216,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);
@@ -292,8 +282,8 @@ export default class Datepicker extends Component {
             onChange,
             value,
             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={this.dateInputRef}
                             value={value}
                             fullWidth={fullWidth}
                             language={language}

diff --git a/packages/ffe-datepicker-react/src/input/Input.js b/packages/ffe-datepicker-react/src/input/Input.js
@@ -1,60 +1,52 @@
-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,
+        className,
+        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',
+                className,
+            )}
+        />
+    );
+});
 
 Input.propTypes = {
     'aria-invalid': string,
     ariaInvalid: oneOfType([bool, string]),
     inputProps: shape({
         className: string,
     }),
+    className: string,
     onBlur: func,
     onChange: func.isRequired,
     onKeyDown: func,
     value: string.isRequired,
     fullWidth: bool,
     language: oneOf(['nb', 'nn', 'en']),
 };
+
+export default Input;