fix: datepicker custom id (#2040)

vtex · Nov 7, 2024 · 7e731c4 · 7e731c4
2 parents 65db519 + dc00550
commit 7e731c4
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 10 deletions.
diff --git a/packages/shoreline/src/components/date-picker/date-picker.tsx b/packages/shoreline/src/components/date-picker/date-picker.tsx
@@ -32,15 +32,16 @@ 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)
 
   const id = defaultId || contextId
   const error = defaultError || contextError
 
+  const { groupProps, labelProps, fieldProps, buttonProps, calendarProps } =
+    useDatePicker({ ...domProps, id }, state, ref)
+
   return (
     <PopoverProvider
       open={state.isOpen}

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
@@ -28,20 +28,21 @@ 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,
     startFieldProps,
     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}