refactor(RangePicker): track focus containers by ref

Author: zombieJ

src/PickerInput/Popup/index.tsx

@@ -20,9 +20,11 @@ export type PopupShowTimeConfig<DateType extends object = any> = Omit<
   Pick<SharedTimeProps<DateType>, 'disabledTime'>;
 
 export interface PopupProps<DateType extends object = any, PresetValue = DateType>
-  extends Pick<React.InputHTMLAttributes<HTMLDivElement>, 'onFocus' | 'onBlur'>,
+  extends
+    Pick<React.InputHTMLAttributes<HTMLDivElement>, 'onFocus' | 'onBlur'>,
     FooterProps<DateType>,
     PopupPanelProps<DateType> {
+  containerRef?: React.Ref<HTMLDivElement>;
   panelRender?: SharedPickerProps['panelRender'];
 
   // Presets
@@ -52,6 +54,7 @@ export interface PopupProps<DateType extends object = any, PresetValue = DateTyp
 
 export default function Popup<DateType extends object = any>(props: PopupProps<DateType>) {
   const {
+    containerRef,
     panelRender,
     internalMode,
     picker,
@@ -216,6 +219,7 @@ export default function Popup<DateType extends object = any>(props: PopupProps<D
   // Container
   let renderNode = (
     <div
+      ref={containerRef}
       onMouseDown={onPanelMouseDown}
       tabIndex={-1}
       className={clsx(

src/PickerInput/RangePicker.tsx

@@ -29,7 +29,7 @@ import PickerContext from './context';
 import useCellRender from './hooks/useCellRender';
 import useFieldsInvalidate from './hooks/useFieldsInvalidate';
 import useFilledProps from './hooks/useFilledProps';
-import useFocusControl from './hooks/useFocusControl';
+import useFocusControl, { isPickerElement } from './hooks/useFocusControl';
 import useOpen from './hooks/useOpen';
 import usePickerRef from './hooks/usePickerRef';
 import usePresets from './hooks/usePresets';
@@ -236,6 +236,7 @@ function RangePicker<DateType extends object = any>(
 
   // ========================= Refs =========================
   const selectorRef = usePickerRef(ref);
+  const popupRef = React.useRef<HTMLDivElement>(null);
 
   // ======================= Semantic =======================
   const [mergedClassNames, mergedStyles] = useSemantic(propClassNames, propStyles);
@@ -346,15 +347,9 @@ function RangePicker<DateType extends object = any>(
     resetValue,
   );
 
-  const isPickerElement = useEvent((element: EventTarget | null) => {
-    const target = element as HTMLElement;
-
-    return (
-      !!target &&
-      (selectorRef.current.nativeElement.contains(target) ||
-        !!target.closest?.(`.${prefixCls}-panel-container`))
-    );
-  });
+  const isInternalPickerElement = useEvent((element: EventTarget | null) =>
+    isPickerElement(element, selectorRef.current.nativeElement, popupRef.current),
+  );
 
   const triggerFocusChange = useEvent((index: number, type: 'focus' | 'blur') => {
     const nextFocused = type === 'focus';
@@ -367,7 +362,7 @@ function RangePicker<DateType extends object = any>(
   });
 
   const [onFieldFocus, onFieldBlur] = useFocusControl(
-    isPickerElement,
+    isInternalPickerElement,
     triggerFocusChange,
     (index, event) => {
       onFocus?.(event, {
@@ -620,6 +615,7 @@ function RangePicker<DateType extends object = any>(
   // >>> Render
   const panel = (
     <Popup<any>
+      containerRef={popupRef}
       // MISC
       {...panelProps}
       showNow={mergedShowNow}

src/PickerInput/hooks/useFocusControl.ts

@@ -39,6 +39,21 @@ export type UseFocusControlReturn = [
   onFieldBlur: FieldBlurHandler,
 ];
 
+// ============================= Utils =============================
+/** Check whether the target is the container itself or inside it. / 判断目标是否为容器自身或其子元素。 */
+function containsElement(container: HTMLElement | null, target: EventTarget | null) {
+  return !!container && (container === target || container.contains(target as Node));
+}
+
+/** Check whether the target belongs to the selector or popup. / 判断目标是否属于输入区域或弹出区域。 */
+export function isPickerElement(
+  target: EventTarget | null,
+  selectorElement: HTMLElement | null,
+  popupElement: HTMLElement | null,
+) {
+  return containsElement(selectorElement, target) || containsElement(popupElement, target);
+}
+
 /**
  * Control field focus and blur events.
  * 控制 field 的聚焦与失焦事件。