feat: Re-trigger onOpenChange if open is fixed

Author: zombieJ

examples/uncontrolled.tsx

@@ -14,17 +14,10 @@ export default () => (
         locale={zhCN}
         picker="week"
         allowClear
-      />
-      <Picker<Moment>
-        generateConfig={momentGenerateConfig}
-        locale={zhCN}
-        picker="month"
-        allowClear
-      />
-      <Picker<Moment>
-        generateConfig={momentGenerateConfig}
-        locale={zhCN}
-        allowClear
+        open
+        onOpenChange={open => {
+          console.log('=>', open);
+        }}
       />
       <button type="button">233</button>
     </div>

src/PanelContext.tsx

@@ -9,6 +9,7 @@ export interface PanelContextProps {
   operationRef?: React.MutableRefObject<ContextOperationRefProps | null>;
   /** Only work with time panel */
   hideHeader?: boolean;
+  panelRef?: React.Ref<HTMLDivElement>;
 }
 
 const PanelContext = React.createContext<PanelContextProps>({});

src/Picker.tsx

@@ -25,7 +25,11 @@ import { isEqual } from './utils/dateUtil';
 import { toArray } from './utils/miscUtil';
 import PanelContext, { ContextOperationRefProps } from './PanelContext';
 import { PickerMode } from './interface';
-import { getDefaultFormat, getInputSize } from './utils/uiUtil';
+import {
+  getDefaultFormat,
+  getInputSize,
+  addGlobalClickEvent,
+} from './utils/uiUtil';
 
 export interface PickerSharedProps<DateType> {
   dropdownClassName?: string;
@@ -128,6 +132,10 @@ function InnerPicker<DateType>(props: PickerProps<DateType>) {
     getDefaultFormat(format, picker, showTime, use12Hours),
   );
 
+  // Panel ref
+  const panelDivRef = React.useRef<HTMLDivElement>(null);
+  const inputDivRef = React.useRef<HTMLDivElement>(null);
+
   // Real value
   const [innerValue, setInnerValue] = React.useState<DateType | null>(() => {
     if (value !== undefined) {
@@ -351,6 +359,22 @@ function InnerPicker<DateType>(props: PickerProps<DateType>) {
     }
   }, [mergedValue]);
 
+  // Global click handler
+  React.useEffect(() =>
+    addGlobalClickEvent(({ target }: MouseEvent) => {
+      if (
+        mergedOpen &&
+        panelDivRef.current &&
+        !panelDivRef.current.contains(target as Node) &&
+        inputDivRef.current &&
+        !inputDivRef.current.contains(target as Node) &&
+        onOpenChange
+      ) {
+        onOpenChange(false);
+      }
+    }),
+  );
+
   // ============================= Panel =============================
   const panelProps = {
     // Remove `picker` & `format` here since TimePicker is little different with other panel
@@ -401,6 +425,7 @@ function InnerPicker<DateType>(props: PickerProps<DateType>) {
       value={{
         operationRef,
         hideHeader: picker === 'time',
+        panelRef: panelDivRef,
       }}
     >
       <div
@@ -420,7 +445,7 @@ function InnerPicker<DateType>(props: PickerProps<DateType>) {
           getPopupContainer={getPopupContainer}
           transitionName={transitionName}
         >
-          <div className={`${prefixCls}-input`}>
+          <div className={`${prefixCls}-input`} ref={inputDivRef}>
             <input
               disabled={disabled}
               readOnly={inputReadOnly || !typing}

src/PickerPanel.tsx

@@ -117,7 +117,9 @@ function PickerPanel<DateType>(props: PickerPanelProps<DateType>) {
     onMouseDown,
   } = props as MergedPickerPanelProps<DateType>;
 
-  const { operationRef } = React.useContext(PanelContext);
+  const { operationRef, panelRef: panelDivRef } = React.useContext(
+    PanelContext,
+  );
   const { extraFooterSelections } = React.useContext(RangeContext);
   const panelRef = React.useRef<PanelRefProps>({});
 
@@ -390,6 +392,7 @@ function PickerPanel<DateType>(props: PickerPanelProps<DateType>) {
       onKeyDown={onInternalKeyDown}
       onBlur={onInternalBlur}
       onMouseDown={onMouseDown}
+      ref={panelDivRef}
     >
       {panelNode}
       {extraFooter || todayNode || extraSelectionNode ? (

src/utils/uiUtil.ts

@@ -152,6 +152,36 @@ export function getInputSize(picker: PickerMode | undefined, format: string) {
   return Math.max(defaultSize, format.length) + 2;
 }
 
+// ===================== Window =====================
+type ClickEventHandler = (event: MouseEvent) => void;
+let globalClickFunc: ClickEventHandler | null = null;
+const clickCallbacks = new Set<ClickEventHandler>();
+
+export function addGlobalClickEvent(callback: ClickEventHandler) {
+  if (
+    !globalClickFunc &&
+    typeof window !== 'undefined' &&
+    window.addEventListener
+  ) {
+    globalClickFunc = (e: MouseEvent) => {
+      clickCallbacks.forEach(queueFunc => {
+        queueFunc(e);
+      });
+    };
+    window.addEventListener('click', globalClickFunc);
+  }
+
+  clickCallbacks.add(callback);
+
+  return () => {
+    clickCallbacks.delete(callback);
+    if (clickCallbacks.size === 0) {
+      window.removeEventListener('click', globalClickFunc!);
+      globalClickFunc = null;
+    }
+  };
+}
+
 // ====================== Mode ======================
 const getYearNextMode = (next: PanelMode): PanelMode => {
   if (next === 'month' || next === 'date') {