Merge branch 'master' into fix/prevent-extra-props-in-selected-item

afc163 · web-flow · commit 45c7fe4122c5 · 2025-12-24T11:49:09.000+08:00
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@rc-component/select",
-  "version": "1.3.2",
+  "version": "1.3.6",
   "description": "React Select",
   "engines": {
     "node": ">=8.x"
diff --git a/src/BaseSelect/index.tsx b/src/BaseSelect/index.tsx
@@ -358,8 +358,11 @@ const BaseSelect = React.forwardRef<BaseSelectRef, BaseSelectProps>((props, ref)
   // Not trigger `open` when `notFoundContent` is empty
   const emptyListContent = !notFoundContent && emptyOptions;
 
-  const [mergedOpen, triggerOpen] = useOpen(open, onPopupVisibleChange, (nextOpen) =>
-    disabled || emptyListContent ? false : nextOpen,
+  const [mergedOpen, triggerOpen] = useOpen(
+    defaultOpen || false,
+    open,
+    onPopupVisibleChange,
+    (nextOpen) => (disabled || emptyListContent ? false : nextOpen),
   );
 
   // ============================= Search =============================
@@ -547,8 +550,7 @@ const BaseSelect = React.forwardRef<BaseSelectRef, BaseSelectProps>((props, ref)
   useSelectTriggerControl(getSelectElements, mergedOpen, triggerOpen, !!mergedComponents.root);
 
   // ========================== Focus / Blur ==========================
-  /** Record real focus status */
-  // const focusRef = React.useRef<boolean>(false);
+  const internalMouseDownRef = React.useRef(false);
 
   const onInternalFocus: React.FocusEventHandler<HTMLElement> = (event) => {
     setFocused(true);
@@ -564,11 +566,12 @@ const BaseSelect = React.forwardRef<BaseSelectRef, BaseSelectProps>((props, ref)
   };
 
   const onRootBlur = () => {
-    macroTask(() => {
-      if (!isInside(getSelectElements(), document.activeElement as HTMLElement)) {
-        triggerOpen(false);
-      }
-    });
+    // Delay close should check the activeElement
+    if (mergedOpen && !internalMouseDownRef.current) {
+      triggerOpen(false, {
+        cancelFun: () => isInside(getSelectElements(), document.activeElement as HTMLElement),
+      });
+    }
   };
 
   const onInternalBlur: React.FocusEventHandler<HTMLElement> = (event) => {
@@ -593,19 +596,22 @@ const BaseSelect = React.forwardRef<BaseSelectRef, BaseSelectProps>((props, ref)
     }
   };
 
-  const onInternalMouseDown: React.MouseEventHandler<HTMLDivElement> = (event, ...restArgs) => {
+  const onRootMouseDown: React.MouseEventHandler<HTMLDivElement> = (event, ...restArgs) => {
     const { target } = event;
     const popupElement: HTMLDivElement = triggerRef.current?.getPopupElement();
 
     // We should give focus back to selector if clicked item is not focusable
     if (popupElement?.contains(target as HTMLElement) && triggerOpen) {
       // Tell `open` not to close since it's safe in the popup
-      triggerOpen(true, {
-        ignoreNext: true,
-      });
+      triggerOpen(true);
     }
 
     onMouseDown?.(event, ...restArgs);
+
+    internalMouseDownRef.current = true;
+    macroTask(() => {
+      internalMouseDownRef.current = false;
+    });
   };
 
   // ============================ Dropdown ============================
@@ -747,7 +753,7 @@ const BaseSelect = React.forwardRef<BaseSelectRef, BaseSelectProps>((props, ref)
       // Token handling
       tokenWithEnter={tokenWithEnter}
       // Open
-      onMouseDown={onInternalMouseDown}
+      onMouseDown={onRootMouseDown}
       // Components
       components={mergedComponents}
     />
@@ -774,7 +780,7 @@ const BaseSelect = React.forwardRef<BaseSelectRef, BaseSelectProps>((props, ref)
       empty={emptyOptions}
       onPopupVisibleChange={onTriggerVisibleChange}
       onPopupMouseEnter={onPopupMouseEnter}
-      onPopupMouseDown={onInternalMouseDown}
+      onPopupMouseDown={onRootMouseDown}
       onPopupBlur={onRootBlur}
     >
       {renderNode}
diff --git a/src/SelectInput/Input.tsx b/src/SelectInput/Input.tsx
@@ -179,9 +179,9 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>((props, ref) => {
     role: role || 'combobox',
     'aria-expanded': open || false,
     'aria-haspopup': 'listbox' as const,
-    'aria-owns': `${id}_list`,
+    'aria-owns': open ? `${id}_list` : undefined,
     'aria-autocomplete': 'list' as const,
-    'aria-controls': `${id}_list`,
+    'aria-controls': open ? `${id}_list` : undefined,
     'aria-activedescendant': open ? activeDescendantId : undefined,
   };
 
diff --git a/src/SelectInput/index.tsx b/src/SelectInput/index.tsx
@@ -170,13 +170,14 @@ export default React.forwardRef<SelectInputRef, SelectInputProps>(function Selec
   // ====================== Open ======================
   const onInternalMouseDown: SelectInputProps['onMouseDown'] = useEvent((event) => {
     if (!disabled) {
+      const inputDOM = getDOM(inputRef.current);
+
       // https://github.com/ant-design/ant-design/issues/56002
       // Tell `useSelectTriggerControl` to ignore this event
       // When icon is dynamic render, the parentNode will miss
       // so we need to mark the event directly
-      (event.nativeEvent as any)._ignore_global_close = true;
+      (event.nativeEvent as any)._ori_target = inputDOM;
 
-      const inputDOM = getDOM(inputRef.current);
       if (inputDOM && event.target !== inputDOM && !inputDOM.contains(event.target as Node)) {
         event.preventDefault();
       }
diff --git a/src/hooks/useOpen.ts b/src/hooks/useOpen.ts
@@ -20,13 +20,12 @@ export const macroTask = (fn: VoidFunction, times = 1) => {
 
 /**
  * Trigger by latest open call, if nextOpen is undefined, means toggle.
- * ignoreNext will skip next call in the macro task queue.
+ * `weak` means this call can be ignored if previous call exists.
  */
 export type TriggerOpenType = (
   nextOpen?: boolean,
   config?: {
-    ignoreNext?: boolean;
-    lazy?: boolean;
+    cancelFun?: () => boolean;
   },
 ) => void;
 
@@ -40,6 +39,7 @@ export type TriggerOpenType = (
  * On client-side hydration, it syncs with the actual open state.
  */
 export default function useOpen(
+  defaultOpen: boolean,
   propOpen: boolean,
   onOpen: (nextOpen: boolean) => void,
   postOpen: (nextOpen: boolean) => boolean,
@@ -51,14 +51,13 @@ export default function useOpen(
     setRendered(true);
   }, []);
 
-  const [stateOpen, internalSetOpen] = useControlledState(false, propOpen);
+  const [stateOpen, internalSetOpen] = useControlledState(defaultOpen, propOpen);
 
   // During SSR, always return false for open state
   const ssrSafeOpen = rendered ? stateOpen : false;
   const mergedOpen = postOpen(ssrSafeOpen);
 
   const taskIdRef = useRef(0);
-  const taskLockRef = useRef(false);
 
   const triggerEvent = useEvent((nextOpen: boolean) => {
     if (onOpen && mergedOpen !== nextOpen) {
@@ -68,35 +67,32 @@ export default function useOpen(
   });
 
   const toggleOpen = useEvent<TriggerOpenType>((nextOpen, config = {}) => {
-    const { ignoreNext = false } = config;
+    const { cancelFun } = config;
 
     taskIdRef.current += 1;
     const id = taskIdRef.current;
 
     const nextOpenVal = typeof nextOpen === 'boolean' ? nextOpen : !mergedOpen;
 
-    // Since `mergedOpen` is post-processed, we need to check if the value really changed
-    if (nextOpenVal) {
-      if (!taskLockRef.current) {
+    function triggerUpdate() {
+      if (
+        // Always check if id is match
+        id === taskIdRef.current &&
+        // Check if need to cancel
+        !cancelFun?.()
+      ) {
         triggerEvent(nextOpenVal);
-
-        // Lock if needed
-        if (ignoreNext) {
-          taskLockRef.current = ignoreNext;
-
-          macroTask(() => {
-            taskLockRef.current = false;
-          }, 3);
-        }
       }
-      return;
     }
 
-    macroTask(() => {
-      if (id === taskIdRef.current && !taskLockRef.current) {
-        triggerEvent(nextOpenVal);
-      }
-    });
+    // Weak update can be ignored
+    if (nextOpenVal) {
+      triggerUpdate();
+    } else {
+      macroTask(() => {
+        triggerUpdate();
+      });
+    }
   });
 
   return [mergedOpen, toggleOpen] as const;
diff --git a/src/hooks/useSelectTriggerControl.ts b/src/hooks/useSelectTriggerControl.ts
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { useEvent } from '@rc-component/util';
+import type { TriggerOpenType } from './useOpen';
 
 export function isInside(elements: (HTMLElement | SVGElement | undefined)[], target: HTMLElement) {
   return elements
@@ -10,7 +11,7 @@ export function isInside(elements: (HTMLElement | SVGElement | undefined)[], tar
 export default function useSelectTriggerControl(
   elements: () => (HTMLElement | SVGElement | undefined)[],
   open: boolean,
-  triggerOpen: (open: boolean) => void,
+  triggerOpen: TriggerOpenType,
   customizedTrigger: boolean,
 ) {
   const onGlobalMouseDown = useEvent((event: MouseEvent) => {
@@ -25,10 +26,13 @@ export default function useSelectTriggerControl(
       target = (event.composedPath()[0] || target) as HTMLElement;
     }
 
+    if ((event as any)._ori_target) {
+      target = (event as any)._ori_target;
+    }
+
     if (
       open &&
       // Marked by SelectInput mouseDown event
-      !(event as any)._ignore_global_close &&
       !isInside(elements(), target)
     ) {
       // Should trigger close
diff --git a/tests/Accessibility.test.tsx b/tests/Accessibility.test.tsx
@@ -214,4 +214,62 @@ describe('Select.Accessibility', () => {
       });
     });
   });
+
+  describe('Select Input attributes', () => {
+    it('should have correct aria and role attributes by default', () => {
+      const { container } = render(
+        <Select
+          options={[
+            {
+              value: '123',
+            },
+            {
+              value: '1234',
+            },
+            {
+              value: '12345',
+            },
+          ]}
+        />,
+      );
+
+      const input = container.querySelector('input');
+      expect(input).toHaveAttribute('role', 'combobox');
+      expect(input).toHaveAttribute('aria-expanded', 'false');
+      expect(input).toHaveAttribute('aria-haspopup', 'listbox');
+      expect(input).not.toHaveAttribute('aria-owns');
+      expect(input).toHaveAttribute('aria-autocomplete', 'list');
+      expect(input).not.toHaveAttribute('aria-controls');
+      expect(input).not.toHaveAttribute('aria-activedescendant');
+    });
+
+    it('should have correct aria and role attributes when open', () => {
+      const { container } = render(
+        <Select
+          id="select"
+          open
+          options={[
+            {
+              value: '123',
+            },
+            {
+              value: '1234',
+            },
+            {
+              value: '12345',
+            },
+          ]}
+        />,
+      );
+
+      const input = container.querySelector('input');
+      expect(input).toHaveAttribute('role', 'combobox');
+      expect(input).toHaveAttribute('aria-expanded', 'true');
+      expect(input).toHaveAttribute('aria-haspopup', 'listbox');
+      expect(input).toHaveAttribute('aria-owns', 'select_list');
+      expect(input).toHaveAttribute('aria-autocomplete', 'list');
+      expect(input).toHaveAttribute('aria-controls', 'select_list');
+      expect(input).toHaveAttribute('aria-activedescendant', 'select_list_0');
+    });
+  });
 });
diff --git a/tests/Combobox.test.tsx b/tests/Combobox.test.tsx
@@ -500,6 +500,8 @@ describe('Select.Combobox', () => {
     for (let i = 0; i < 10; i += 1) {
       fireEvent.mouseDown(container.querySelector('input')!);
       expectOpen(container);
+
+      await delay(100);
     }
 
     fireEvent.blur(container.querySelector('input')!);
diff --git a/tests/Select.test.tsx b/tests/Select.test.tsx
@@ -66,6 +66,16 @@ describe('Select.Basic', () => {
     expect(onPopupVisibleChange).toHaveBeenCalledWith(false);
   });
 
+  it('should defaultOpen work', () => {
+    const { container } = render(
+      <Select defaultOpen>
+        <Option value="1">One</Option>
+        <Option value="2">Two</Option>
+      </Select>,
+    );
+    expectOpen(container);
+  });
+
   describe('render', () => {
     function genSelect(props?: Partial<SelectProps>) {
       return (
@@ -603,7 +613,7 @@ describe('Select.Basic', () => {
       </Select>,
     );
 
-    keyDown(container.querySelector('input'), 40);
+    keyDown(container.querySelector('input'), KeyCode.DOWN);
     expectOpen(container);
   });
 
@@ -2566,9 +2576,9 @@ describe('Select.Basic', () => {
     await waitFakeTimer();
     expectOpen(container, true);
 
-    keyDown(inputElem!, 40);
-    keyUp(inputElem!, 40);
-    keyDown(inputElem!, 13);
+    keyDown(inputElem!, KeyCode.DOWN);
+    keyUp(inputElem!, KeyCode.DOWN);
+    keyDown(inputElem!, KeyCode.ENTER);
 
     await waitFakeTimer();
     expect(onBlur).toHaveBeenCalledTimes(1);
@@ -2579,9 +2589,9 @@ describe('Select.Basic', () => {
     await waitFakeTimer();
     expectOpen(container, true);
 
-    keyDown(inputElem!, 40);
-    keyUp(inputElem!, 40);
-    keyDown(inputElem!, 13);
+    keyDown(inputElem!, KeyCode.DOWN);
+    keyUp(inputElem!, KeyCode.DOWN);
+    keyDown(inputElem!, KeyCode.ENTER);
 
     await waitFakeTimer();
     expect(onBlur).toHaveBeenCalledTimes(2);
diff --git a/tests/__snapshots__/Combobox.test.tsx.snap b/tests/__snapshots__/Combobox.test.tsx.snap
@@ -15,10 +15,8 @@ exports[`Select.Combobox renders controlled correctly 1`] = `
     </div>
     <input
       aria-autocomplete="list"
-      aria-controls="test-id_list"
       aria-expanded="false"
       aria-haspopup="listbox"
-      aria-owns="test-id_list"
       autocomplete="off"
       class="rc-select-input"
       id="test-id"
@@ -45,10 +43,8 @@ exports[`Select.Combobox renders correctly 1`] = `
     </div>
     <input
       aria-autocomplete="list"
-      aria-controls="test-id_list"
       aria-expanded="false"
       aria-haspopup="listbox"
-      aria-owns="test-id_list"
       autocomplete="off"
       class="rc-select-input"
       id="test-id"
diff --git a/tests/__snapshots__/Select.test.tsx.snap b/tests/__snapshots__/Select.test.tsx.snap
diff --git a/tests/__snapshots__/ssr.test.tsx.snap b/tests/__snapshots__/ssr.test.tsx.snap
diff --git a/tests/focus.test.tsx b/tests/focus.test.tsx

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@rc-component/select",`
`3`		`- "version": "1.3.2",`
	`3`	`+ "version": "1.3.6",`
`4`	`4`	`"description": "React Select",`
`5`	`5`	`"engines": {`
`6`	`6`	`"node": ">=8.x"`
Original file line number	Diff line number	Diff line change
`@@ -500,6 +500,8 @@ describe('Select.Combobox', () => {`
`500`	`500`	`for (let i = 0; i < 10; i += 1) {`
`501`	`501`	`fireEvent.mouseDown(container.querySelector('input')!);`
`502`	`502`	`expectOpen(container);`
	`503`	`+`
	`504`	`+ await delay(100);`
`503`	`505`	`}`
`504`	`506`
`505`	`507`	`fireEvent.blur(container.querySelector('input')!);`