From 294c5dd08886f837d3c86702ac8453a27226fb6d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tuva=20=C3=98deg=C3=A5rd?= <tuva.odegard@sparebank1.no>
Date: Fri, 9 Feb 2024 08:40:59 +0100
Subject: [PATCH 1/2] feat(ffe-datepicker-react): add innerRef to Datepicker

---
 .../ffe-datepicker-react/src/datepicker/Datepicker.js | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/packages/ffe-datepicker-react/src/datepicker/Datepicker.js b/packages/ffe-datepicker-react/src/datepicker/Datepicker.js
index 44b0fc9a5e..55cde65041 100644
--- 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,

From d92af4ecf3049ff63d553bf3d135625ce8b31ef8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tuva=20=C3=98deg=C3=A5rd?= <tuva.odegard@sparebank1.no>
Date: Fri, 9 Feb 2024 08:42:40 +0100
Subject: [PATCH 2/2] =?UTF-8?q?docs(component-overview):=20Inkludere=20eks?=
 =?UTF-8?q?empel=20p=C3=A5=20hvordan=20bruker=20innerRef=20i=20Datepicker?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 component-overview/examples/datepicker/Datepicker.jsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/component-overview/examples/datepicker/Datepicker.jsx b/component-overview/examples/datepicker/Datepicker.jsx
index fa0a7d8835..95bf7a5195 100644
--- 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}
         />
     );
 }