fix: popover id

aboveyunhai · Feb 17, 2025 · 9175dca · 9175dca
1 parent 6a0050c
commit 9175dca
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 6 deletions.
diff --git a/example/index.tsx b/example/index.tsx
@@ -179,7 +179,7 @@ const App = () => {
                       </Flex>
                       {/* chakra ui add prefix for the trigger for some reasons? */}
                       <Flex gap="1rem" alignItems="center">
-                        <label>Default:</label>
+                        <label htmlFor="default">Default:</label>
                         <SingleDatepicker
                           id="default"
                           date={date}
@@ -238,9 +238,7 @@ const App = () => {
                         </Button>
                       </Flex>
                       <Flex gap="1rem" alignItems="center">
-                        <label htmlFor={`popover-trigger-default-range`}>
-                          Default:
-                        </label>
+                        <label htmlFor={`default-range`}>Default:</label>
                         <RangeDatepicker
                           id="default-range"
                           selectedDates={selectedDates}

diff --git a/src/range.tsx b/src/range.tsx
@@ -174,6 +174,9 @@ export const RangeDatepicker: React.FC<RangeDatepickerProps> = ({
 
   return (
     <Popover.Root
+      ids={{
+        trigger: id,
+      }}
       open={open}
       onOpenChange={(e) => {
         if (e.open) {
@@ -207,7 +210,6 @@ export const RangeDatepicker: React.FC<RangeDatepickerProps> = ({
         <Flex position="relative" alignItems={'center'}>
           <Popover.Anchor>
             <Input
-              id={id}
               onKeyUp={(e) => {
                 if (e.key === ' ' && !open) {
                   e.preventDefault();

diff --git a/src/single.tsx b/src/single.tsx
@@ -183,6 +183,9 @@ export const SingleDatepicker: React.FC<SingleDatepickerProps> = ({
 
   return (
     <Popover.Root
+      ids={{
+        trigger: id,
+      }}
       open={open}
       onOpenChange={(e) => {
         if (e.open) {
@@ -196,6 +199,7 @@ export const SingleDatepicker: React.FC<SingleDatepickerProps> = ({
       portalled={usePortal}
       lazyMount={true}
       unmountOnExit={true}
+      {...restProps.propsConfigs?.popoverCompProps?.popoverRootProps}
     >
       {!children && (restProps.triggerVariant ?? 'default') === 'default' ? (
         <Popover.Trigger asChild>
@@ -219,7 +223,6 @@ export const SingleDatepicker: React.FC<SingleDatepickerProps> = ({
         <Flex position="relative" alignItems={'center'}>
           <Popover.Anchor>
             <Input
-              id={id}
               onKeyUp={(e) => {
                 if (e.key === ' ' && !open) {
                   e.preventDefault();

diff --git a/src/utils/commonTypes.ts b/src/utils/commonTypes.ts
@@ -8,6 +8,7 @@ import {
   StackProps,
   SeparatorProps,
   PopoverContentProps,
+  PopoverRootProps,
 } from '@chakra-ui/react';
 import { DateObj } from 'dayzed';
 
@@ -30,6 +31,7 @@ export interface DayOfMonthBtnStyleProps {
 }
 
 export interface PopoverCompProps {
+  popoverRootProps?: PopoverRootProps;
   popoverContentProps?: PopoverContentProps;
   popoverBodyProps?: PopoverBodyProps;
 }