Datepicker v3

src/datepicker/DatePicker.ts

@@ -1,4 +1,4 @@
-import { createOnKeyDown } from "reakit-utils";
+import { createOnKeyDown, isSelfTarget } from "reakit-utils";
 import { BoxHTMLProps, BoxOptions, useBox } from "reakit";
 import { createComponent, createHook } from "reakit-system";
 import { ariaAttr, callAllHandlers } from "@chakra-ui/utils";

src/datepicker/DatePickerContent.ts

@@ -3,6 +3,7 @@ import { PopoverHTMLProps, PopoverOptions, usePopover } from "reakit";
 
 import { DATE_PICKER_CONTENT_KEYS } from "./__keys";
 import { DatePickerStateReturn } from "./DatePickerState";
+import { callAllHandlers } from "@chakra-ui/utils";
 
 export type DatePickerContentOptions = PopoverOptions &
   Pick<DatePickerStateReturn, "dialogId">;
@@ -20,8 +21,16 @@ export const useDatePickerContent = createHook<
   compose: usePopover,
   keys: DATE_PICKER_CONTENT_KEYS,
 
-  useProps({ dialogId }, htmlProps) {
-    return { id: dialogId, ...htmlProps };
+  useProps({ dialogId }, { onMouseDown: htmlOnMouseDown, ...htmlProps }) {
+    const onMouseDown = (e: React.MouseEvent) => {
+      e.stopPropagation();
+    };
+
+    return {
+      id: dialogId,
+      onMouseDown: callAllHandlers(htmlOnMouseDown, onMouseDown),
+      ...htmlProps,
+    };
   },
 });
 

src/datepicker/DatePickerState.ts

@@ -81,10 +81,6 @@ export const useDatePickerState = (props: DatePickerStateInitialProps = {}) => {
       calendar.setFocused(true);
       dateValue && calendar.focusCell(dateValue);
     }
-
-    if (!popover.visible) {
-      composite.first();
-    }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [popover.visible]);
 

src/datepicker/DatePickerTrigger.ts

@@ -1,3 +1,4 @@
+import { callAllHandlers } from "@chakra-ui/utils";
 import { createComponent, createHook } from "reakit-system";
 import {
   usePopoverDisclosure,
@@ -22,8 +23,16 @@ export const useDatePickerTrigger = createHook<
   compose: usePopoverDisclosure,
   keys: DATE_PICKER_TRIGGER_KEYS,
 
-  useProps(_, htmlProps) {
-    return { tabIndex: -1, ...htmlProps };
+  useProps(_, { onMouseDown: htmlOnMouseDown, ...htmlProps }) {
+    const onMouseDown = (e: React.MouseEvent) => {
+      e.stopPropagation();
+    };
+
+    return {
+      tabIndex: -1,
+      onMouseDown: callAllHandlers(htmlOnMouseDown, onMouseDown),
+      ...htmlProps,
+    };
   },
 });