[Datepicker] DateWrapper now uses state instead of ref (#3333)

* bug: DateWrapper now uses state instead of ref to update after first render

* changeset update

* Added comments based on change

.changeset/few-dragons-behave.md

@@ -0,0 +1,5 @@
+---
+"@navikt/ds-react": patch
+---
+
+Datepicker: Use of 'open'-prop set to 'true' on first render could lead to the dialog not opening.

@navikt/core/react/src/date/datepicker/DatePicker.tsx

@@ -1,6 +1,6 @@
 import cl from "clsx";
 import { isWeekend } from "date-fns";
-import React, { forwardRef, useRef, useState } from "react";
+import React, { forwardRef, useState } from "react";
 import { DateRange, DayPicker, isMatch } from "react-day-picker";
 import { omit } from "../../util";
 import { useId } from "../../util/hooks";
@@ -88,8 +88,9 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
     const ariaId = useId(id);
     const [open, setOpen] = useState(_open ?? false);
 
-    const wrapperRef = useRef<HTMLDivElement | null>(null);
-    const mergedRef = useMergeRefs(wrapperRef, ref);
+    /* We use state here to insure that anchor is defined if open is true on initial render */
+    const [wrapperRef, setWrapperRef] = useState<HTMLDivElement | null>(null);
+    const mergedRef = useMergeRefs(setWrapperRef, ref);
 
     const [selectedDates, setSelectedDates] = React.useState<
       Date | Date[] | DateRange | undefined
@@ -167,7 +168,7 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
           {children}
           <DateWrapper
             open={_open ?? open}
-            anchor={wrapperRef.current}
+            anchor={wrapperRef}
             onClose={() => onClose?.() ?? setOpen(false)}
             locale={locale}
             variant={mode}

@navikt/core/react/src/date/monthpicker/MonthPicker.tsx

@@ -1,5 +1,5 @@
 import cl from "clsx";
-import React, { forwardRef, useRef, useState } from "react";
+import React, { forwardRef, useState } from "react";
 import { DayPickerProvider } from "react-day-picker";
 import { useId } from "../../util/hooks";
 import { useMergeRefs } from "../../util/hooks/useMergeRefs";
@@ -81,8 +81,9 @@ export const MonthPicker = forwardRef<HTMLDivElement, MonthPickerProps>(
     const ariaId = useId(id);
     const [open, setOpen] = useState(_open ?? false);
 
-    const wrapperRef = useRef<HTMLDivElement | null>(null);
-    const mergedRef = useMergeRefs(wrapperRef, ref);
+    /* We use state here to insure that anchor is defined if open is true on initial render */
+    const [wrapperRef, setWrapperRef] = useState<HTMLDivElement | null>(null);
+    const mergedRef = useMergeRefs(setWrapperRef, ref);
 
     const [selectedMonth, setSelectedMonth] = useState<Date | undefined>(
       defaultSelected,
@@ -118,7 +119,7 @@ export const MonthPicker = forwardRef<HTMLDivElement, MonthPickerProps>(
           {children}
           <DateWrapper
             open={_open ?? open}
-            anchor={wrapperRef.current}
+            anchor={wrapperRef}
             onClose={() => onClose?.() ?? setOpen(false)}
             locale={locale}
             variant="month"