chore: new logic of passing

Author: zombieJ

src/BaseSelect/index.tsx

@@ -682,25 +682,11 @@ const BaseSelect = React.forwardRef<BaseSelectRef, BaseSelectProps>((props, ref)
     const { target } = event;
     const popupElement: HTMLDivElement = triggerRef.current?.getPopupElement();
 
-    console.log('???');
-
     // We should give focus back to selector if clicked item is not focusable
-    // if (popupElement?.contains(target as HTMLElement)) {
-    //   const timeoutId = setTimeout(() => {
-    //     const index = activeTimeoutIds.indexOf(timeoutId);
-    //     if (index !== -1) {
-    //       activeTimeoutIds.splice(index, 1);
-    //     }
-
-    //     cancelSetMockFocused();
-
-    //     if (!mobile && !popupElement.contains(document.activeElement)) {
-    //       selectorRef.current?.focus();
-    //     }
-    //   });
-
-    //   activeTimeoutIds.push(timeoutId);
-    // }
+    if (popupElement?.contains(target as HTMLElement) && triggerOpen) {
+      // Tell `open` not to close since it's safe in the popup
+      triggerOpen(true, true);
+    }
 
     onMouseDown?.(event, ...restArgs);
   };
@@ -881,9 +867,6 @@ const BaseSelect = React.forwardRef<BaseSelectRef, BaseSelectProps>((props, ref)
   //   </SelectTrigger>
   // );
 
-  // >>> Render
-  let renderNode: React.ReactNode;
-
   // Render raw
   // if (customizeRawInputElement) {
   //   renderNode = selectorNode;
@@ -907,7 +890,8 @@ const BaseSelect = React.forwardRef<BaseSelectRef, BaseSelectProps>((props, ref)
   //   );
   // }
 
-  renderNode = (
+  // >>> Render
+  let renderNode: React.ReactElement = (
     <SelectInput
       {...restProps}
       // Ref
@@ -947,6 +931,39 @@ const BaseSelect = React.forwardRef<BaseSelectRef, BaseSelectProps>((props, ref)
     />
   );
 
+  // const renderSelectTrigger = (childrenNode?: React.ReactElement) => (
+  //   <SelectTrigger
+  //     ref={triggerRef}
+  //     disabled={disabled}
+  //     prefixCls={prefixCls}
+  //     visible={mergedOpen}
+  //     popupElement={optionList}
+  //     animation={animation}
+  //     transitionName={transitionName}
+  //     popupStyle={popupStyle}
+  //     popupClassName={popupClassName}
+  //     direction={direction}
+  //     popupMatchSelectWidth={popupMatchSelectWidth}
+  //     popupRender={popupRender}
+  //     popupAlign={popupAlign}
+  //     placement={placement}
+  //     builtinPlacements={builtinPlacements}
+  //     getPopupContainer={getPopupContainer}
+  //     empty={emptyOptions}
+  //     // onPopupVisibleChange={onTriggerVisibleChange}
+  //     onPopupMouseEnter={onPopupMouseEnter}
+  //   >
+  //     {childrenNode}
+  //   </SelectTrigger>
+  // );
+
+  // if (components.root) {
+  //   renderNode = renderSelectTrigger(renderSelectInput());
+  // } else {
+  //   // renderNode = renderSelectInput(renderSelectTrigger());
+  //   renderNode = renderSelectInput(renderSelectTrigger(<a />));
+  // }
+
   renderNode = (
     <SelectTrigger
       ref={triggerRef}
@@ -968,6 +985,7 @@ const BaseSelect = React.forwardRef<BaseSelectRef, BaseSelectProps>((props, ref)
       empty={emptyOptions}
       // onPopupVisibleChange={onTriggerVisibleChange}
       onPopupMouseEnter={onPopupMouseEnter}
+      onPopupMouseDown={onInternalMouseDown}
     >
       {renderNode}
     </SelectTrigger>

src/SelectInput/index.tsx

@@ -44,6 +44,7 @@ export interface SelectInputProps extends Omit<React.HTMLAttributes<HTMLDivEleme
   style?: React.CSSProperties;
   focused?: boolean;
   components: ComponentsConfig;
+  children?: React.ReactElement;
 }
 
 const DEFAULT_OMIT_PROPS = [
@@ -77,6 +78,7 @@ export default React.forwardRef<SelectInputRef, SelectInputProps>(function Selec
     prefix,
     suffix,
     clearIcon,
+    children,
 
     // Data
     multiple,
@@ -281,6 +283,7 @@ export default React.forwardRef<SelectInputRef, SelectInputProps>(function Selec
             {clearIcon}
           </Affix>
         )}
+        {children}
       </div>
     </SelectInputContext.Provider>
   );

src/SelectTrigger.tsx

@@ -76,6 +76,7 @@ export interface SelectTriggerProps {
   onPopupVisibleChange?: (visible: boolean) => void;
 
   onPopupMouseEnter: () => void;
+  onPopupMouseDown: React.MouseEventHandler<HTMLDivElement>;
 }
 
 const SelectTrigger: React.ForwardRefRenderFunction<RefTriggerProps, SelectTriggerProps> = (
@@ -102,6 +103,7 @@ const SelectTrigger: React.ForwardRefRenderFunction<RefTriggerProps, SelectTrigg
     empty,
     onPopupVisibleChange,
     onPopupMouseEnter,
+    onPopupMouseDown,
     ...restProps
   } = props;
 
@@ -162,7 +164,11 @@ const SelectTrigger: React.ForwardRefRenderFunction<RefTriggerProps, SelectTrigg
       builtinPlacements={mergedBuiltinPlacements}
       prefixCls={popupPrefixCls}
       popupMotion={{ motionName: mergedTransitionName }}
-      popup={<div onMouseEnter={onPopupMouseEnter}>{popupNode}</div>}
+      popup={
+        <div onMouseEnter={onPopupMouseEnter} onMouseDown={onPopupMouseDown}>
+          {popupNode}
+        </div>
+      }
       ref={triggerPopupRef}
       stretch={stretch}
       popupAlign={popupAlign}

src/hooks/useOpen.ts

@@ -1,12 +1,29 @@
 import { useControlledState, useEvent } from '@rc-component/util';
 import { useRef } from 'react';
 
-const macroTask = (fn: VoidFunction) => {
+const internalMacroTask = (fn: VoidFunction) => {
   const channel = new MessageChannel();
   channel.port1.onmessage = fn;
   channel.port2.postMessage(null);
 };
 
+const macroTask = (fn: VoidFunction, times = 1) => {
+  if (times <= 0) {
+    fn();
+    return;
+  }
+
+  internalMacroTask(() => {
+    macroTask(fn, times - 1);
+  });
+};
+
+/**
+ * Trigger by latest open call, if nextOpen is undefined, means toggle.
+ * ignoreNext will skip next call in the macro task queue.
+ */
+export type TriggerOpenType = (nextOpen?: boolean, ignoreNext?: boolean) => void;
+
 /**
  * When `open` is controlled, follow the controlled value;
  * Otherwise use uncontrolled logic.
@@ -17,11 +34,12 @@ export default function useOpen(
   propOpen: boolean,
   onOpen: (nextOpen: boolean) => void,
   postOpen: (nextOpen: boolean) => boolean,
-) {
+): [boolean, TriggerOpenType] {
   const [stateOpen, internalSetOpen] = useControlledState(false, propOpen);
   const mergedOpen = postOpen(stateOpen);
 
   const taskIdRef = useRef(0);
+  const taskLockRef = useRef(false);
 
   const triggerEvent = useEvent((nextOpen: boolean) => {
     if (onOpen && mergedOpen !== nextOpen) {
@@ -30,7 +48,7 @@ export default function useOpen(
     internalSetOpen(nextOpen);
   });
 
-  const toggleOpen = useEvent((nextOpen?: boolean) => {
+  const toggleOpen = useEvent<TriggerOpenType>((nextOpen?: boolean, ignoreNext = false) => {
     taskIdRef.current += 1;
     const id = taskIdRef.current;
 
@@ -39,11 +57,20 @@ export default function useOpen(
     // Since `mergedOpen` is post-processed, we need to check if the value really changed
     if (nextOpenVal) {
       triggerEvent(true);
+
+      // Lock if needed
+      if (ignoreNext) {
+        taskLockRef.current = ignoreNext;
+
+        macroTask(() => {
+          taskLockRef.current = false;
+        }, 2);
+      }
       return;
     }
 
     macroTask(() => {
-      if (id === taskIdRef.current) {
+      if (id === taskIdRef.current && !taskLockRef.current) {
         triggerEvent(false);
       }
     });