Merge pull request #1775 from SpareBank1/datepicker-ref

feat(datepicker): add innerRef to Datepicker
SpareBank1 · Feb 22, 2024 · 8b63eb1 · 8b63eb1
2 parents 7bb36b7 + d92af4e
commit 8b63eb1
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 2 deletions.
diff --git a/component-overview/examples/datepicker/Datepicker.jsx b/component-overview/examples/datepicker/Datepicker.jsx
@@ -1,8 +1,9 @@
-import { useState } from 'react';
+import { useState, useRef } from 'react';
 import Datepicker from '@sb1/ffe-datepicker-react';
 
 () => {
     const [date, setDate] = useState('01.01.2016');
+    const innerRef = useRef(date); //Optional ref to the input element
 
     return (
         <Datepicker
@@ -13,6 +14,7 @@ import Datepicker from '@sb1/ffe-datepicker-react';
             minDate="01.01.2016"
             onChange={setDate}
             value={date}
+            innerRef={innerRef}
         />
     );
 }
diff --git a/packages/ffe-datepicker-react/src/datepicker/Datepicker.js b/packages/ffe-datepicker-react/src/datepicker/Datepicker.js
@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { bool, func, oneOfType, shape, string } from 'prop-types';
+import { bool, func, oneOfType, shape, string, PropTypes } from 'prop-types';
 import classNames from 'classnames';
 import { v4 as uuid } from 'uuid';
 import Calendar from '../calendar';
@@ -292,6 +292,7 @@ export default class Datepicker extends Component {
             onChange,
             value,
             fullWidth,
+            innerRef,
         } = this.props;
         const { minDate, maxDate } = this.state;
 
@@ -349,6 +350,10 @@ export default class Datepicker extends Component {
                             onChange={evt => onChange(evt.target.value)}
                             onKeyDown={this.onInputKeydown}
                             ref={c => {
+                                if (innerRef) {
+                                    innerRef.current = c;
+                                }
+
                                 this.dateInputRef = c;
                             }}
                             value={value}
@@ -399,6 +404,7 @@ Datepicker.defaultProps = {
     keepDisplayStateOnError: false,
     onValidationComplete: () => {},
     fullWidth: false,
+    innerRef: undefined,
 };
 
 Datepicker.propTypes = {
@@ -407,6 +413,9 @@ Datepicker.propTypes = {
     calendarAbove: bool,
     hideErrors: bool,
     onValidationComplete: func,
+    innerRef:
+        PropTypes.oneOfType([func, shape({ current: PropTypes.any })]) ||
+        undefined,
     inputProps: shape({
         className: string,
         id: string,