From 1c78e6fcf75afa45ff7b47008ca8d953d278bfd3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?La=C3=ADs=20Fray=20Ribeiro?= <lais.ribeiro@vtex.com>
Date: Wed, 6 Nov 2024 11:47:32 -0300
Subject: [PATCH 1/2] fix(data-range-picker): change to id from groupProps not
 override id from field context

fix #2039
---
 .../date-range-picker/date-range-picker.tsx      | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/shoreline/src/components/date-range-picker/date-range-picker.tsx b/packages/shoreline/src/components/date-range-picker/date-range-picker.tsx
index 0c2c8ae9b1..fd686083c2 100644
--- a/packages/shoreline/src/components/date-range-picker/date-range-picker.tsx
+++ b/packages/shoreline/src/components/date-range-picker/date-range-picker.tsx
@@ -28,6 +28,13 @@ export function DateRangePicker<T extends DateValue>(
   const state = useDateRangePickerState(domProps)
   const ref = useRef(null)
   const anchorRef = useRef<HTMLDivElement>(null)
+
+  const store = useFieldContext()
+  const { id: contextId, error: contextError } = useStore(store, (s) => s)
+
+  const id = defaultId || contextId
+  const error = defaultError || contextError
+
   const {
     groupProps,
     labelProps,
@@ -35,13 +42,7 @@ export function DateRangePicker<T extends DateValue>(
     endFieldProps,
     buttonProps,
     calendarProps,
-  } = useDateRangePicker(domProps, state, ref)
-
-  const store = useFieldContext()
-  const { id: contextId, error: contextError } = useStore(store, (s) => s)
-
-  const id = defaultId || contextId
-  const error = defaultError || contextError
+  } = useDateRangePicker({ ...domProps, id }, state, ref)
 
   return (
     <PopoverProvider
@@ -52,7 +53,6 @@ export function DateRangePicker<T extends DateValue>(
       <div ref={anchorRef} data-sl-date-range-picker>
         <div {...labelProps} />
         <div
-          id={id}
           data-sl-date-range-picker-input
           {...groupProps}
           ref={ref}

From dc00550d17d8d3a41269d4f4d903c2b6722d657c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?La=C3=ADs=20Fray=20Ribeiro?= <lais.ribeiro@vtex.com>
Date: Wed, 6 Nov 2024 11:50:28 -0300
Subject: [PATCH 2/2] fix(data-picker): change to id from groupProps not
 override id from field context

changes the way the id is handled internally so that the id that comes from the useDatePicker hook
does not overwrite the one that comes from the field context or externally. Instead, the hook will
receive these other ids for correct operation

fix #2039 for dataPicker
---
 .../shoreline/src/components/date-picker/date-picker.tsx     | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/shoreline/src/components/date-picker/date-picker.tsx b/packages/shoreline/src/components/date-picker/date-picker.tsx
index 7f23c45a47..8114da12ac 100644
--- a/packages/shoreline/src/components/date-picker/date-picker.tsx
+++ b/packages/shoreline/src/components/date-picker/date-picker.tsx
@@ -32,8 +32,6 @@ export function DatePicker<T extends DateValue>(props: DatePickerProps<T>) {
   const state = useDatePickerState(domProps)
   const ref = useRef(null)
   const anchorRef = useRef<HTMLDivElement>(null)
-  const { groupProps, labelProps, fieldProps, buttonProps, calendarProps } =
-    useDatePicker(domProps, state, ref)
 
   const store = useFieldContext()
   const { id: contextId, error: contextError } = useStore(store, (s) => s)
@@ -41,6 +39,9 @@ export function DatePicker<T extends DateValue>(props: DatePickerProps<T>) {
   const id = defaultId || contextId
   const error = defaultError || contextError
 
+  const { groupProps, labelProps, fieldProps, buttonProps, calendarProps } =
+    useDatePicker({ ...domProps, id }, state, ref)
+
   return (
     <PopoverProvider
       open={state.isOpen}