fix: dropdown not trigger onOpenChange when click menu item (ant-desi…

…gn#45378) * fix: dropdown not trigger onOpenChange when click menu item * chore: add source * docs: update * test: update test
ammar-knowledge · Oct 17, 2023 · a337fee · a337fee
1 parent d8140e0
commit a337fee
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 16 deletions.
diff --git a/components/dropdown/__tests__/index.test.tsx b/components/dropdown/__tests__/index.test.tsx
@@ -264,4 +264,28 @@ describe('Dropdown', () => {
 
     expect(divRef.current).toBeTruthy();
   });
+
+  it('should trigger open event when click on item', () => {
+    const onOpenChange = jest.fn();
+
+    render(
+      <Dropdown
+        onOpenChange={onOpenChange}
+        open
+        menu={{
+          items: [
+            {
+              label: <div className="bamboo" />,
+              key: 1,
+            },
+          ],
+        }}
+      >
+        <a />
+      </Dropdown>,
+    );
+
+    fireEvent.click(document.body.querySelector('.bamboo')!);
+    expect(onOpenChange).toHaveBeenCalledWith(false, { source: 'menu' });
+  });
 });
diff --git a/components/dropdown/dropdown.tsx b/components/dropdown/dropdown.tsx
@@ -45,7 +45,7 @@ export interface DropdownProps {
   arrow?: boolean | DropdownArrowOptions;
   trigger?: ('click' | 'hover' | 'contextMenu')[];
   dropdownRender?: (originNode: React.ReactNode) => React.ReactNode;
-  onOpenChange?: (open: boolean) => void;
+  onOpenChange?: (open: boolean, info: { source: 'trigger' | 'menu' }) => void;
   open?: boolean;
   disabled?: boolean;
   destroyPopupOnHide?: boolean;
@@ -194,7 +194,7 @@ const Dropdown: CompoundedComponent = (props) => {
   });
 
   const onInnerOpenChange = useEvent((nextOpen: boolean) => {
-    onOpenChange?.(nextOpen);
+    onOpenChange?.(nextOpen, { source: 'trigger' });
     onVisibleChange?.(nextOpen);
     setOpen(nextOpen);
   });
@@ -213,6 +213,7 @@ const Dropdown: CompoundedComponent = (props) => {
   });
 
   const onMenuClick = React.useCallback(() => {
+    onOpenChange?.(false, { source: 'menu' });
     setOpen(false);
   }, []);
 

diff --git a/components/dropdown/index.en-US.md b/components/dropdown/index.en-US.md
@@ -42,7 +42,7 @@ Common props ref：[Common props](/docs/react/common-props)
 ### Dropdown
 
 | Property | Description | Type | Default | Version |
-| --- | --- | --- | --- | --- |
+| --- | --- | --- | --- | --- | --- |
 | arrow | Whether the dropdown arrow should be visible | boolean \| { pointAtCenter: boolean } | false |  |
 | autoAdjustOverflow | Whether to adjust dropdown placement automatically when dropdown is off screen | boolean | true | 5.2.0 |
 | autoFocus | Focus element in `overlay` when opened | boolean | false | 4.21.0 |
@@ -56,7 +56,7 @@ Common props ref：[Common props](/docs/react/common-props)
 | placement | Placement of popup menu: `bottom` `bottomLeft` `bottomRight` `top` `topLeft` `topRight` | string | `bottomLeft` |  |
 | trigger | The trigger mode which executes the dropdown action. Note that hover can't be used on touchscreens | Array&lt;`click`\|`hover`\|`contextMenu`> | \[`hover`] |  |
 | open | Whether the dropdown menu is currently open. Use `visible` under 4.23.0 ([why?](/docs/react/faq#why-open)) | boolean | - | 4.23.0 |
-| onOpenChange | Called when the open state is changed. Not trigger when hidden by click item. Use `onVisibleChange` under 4.23.0 ([why?](/docs/react/faq#why-open)) | (open: boolean) => void | - | 4.23.0 |
+| onOpenChange | Called when the open state is changed. Not trigger when hidden by click item. Use `onVisibleChange` under 4.23.0 ([why?](/docs/react/faq#why-open)) | (open: boolean, info: { source: 'trigger' | 'menu' }) => void | - | `info.source`: 5.11.0 |
 
 ### Dropdown.Button
 

diff --git a/components/dropdown/index.zh-CN.md b/components/dropdown/index.zh-CN.md
@@ -46,7 +46,7 @@ demo:
 ### Dropdown
 
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
-| --- | --- | --- | --- | --- |
+| --- | --- | --- | --- | --- | --- |
 | arrow | 下拉框箭头是否显示 | boolean \| { pointAtCenter: boolean } | false |  |
 | autoAdjustOverflow | 下拉框被遮挡时自动调整位置 | boolean | true | 5.2.0 |
 | autoFocus | 打开后自动聚焦下拉框 | boolean | false | 4.21.0 |
@@ -60,7 +60,7 @@ demo:
 | placement | 菜单弹出位置：`bottom` `bottomLeft` `bottomRight` `top` `topLeft` `topRight` | string | `bottomLeft` |  |
 | trigger | 触发下拉的行为，移动端不支持 hover | Array&lt;`click`\|`hover`\|`contextMenu`> | \[`hover`] |  |
 | open | 菜单是否显示，小于 4.23.0 使用 `visible`（[为什么?](/docs/react/faq#弹层类组件为什么要统一至-open-属性)） | boolean | - | 4.23.0 |
-| onOpenChange | 菜单显示状态改变时调用，点击菜单按钮导致的消失不会触发。小于 4.23.0 使用 `onVisibleChange`（[为什么?](/docs/react/faq#弹层类组件为什么要统一至-open-属性)） | (open: boolean) => void | - | 4.23.0 |
+| onOpenChange | 菜单显示状态改变时调用，点击菜单按钮导致的消失不会触发。小于 4.23.0 使用 `onVisibleChange`（[为什么?](/docs/react/faq#弹层类组件为什么要统一至-open-属性)） | (open: boolean, info: { source: 'trigger' | 'menu' }) => void | - | `info.source`: 5.11.0 |
 
 ### Dropdown.Button
 

diff --git a/components/table/hooks/useFilter/FilterDropdown.tsx b/components/table/hooks/useFilter/FilterDropdown.tsx
@@ -11,7 +11,7 @@ import Button from '../../../button';
 import type { CheckboxChangeEvent } from '../../../checkbox';
 import Checkbox from '../../../checkbox';
 import { ConfigContext } from '../../../config-provider/context';
-import Dropdown from '../../../dropdown';
+import Dropdown, { type DropdownProps } from '../../../dropdown';
 import Empty from '../../../empty';
 import type { MenuProps } from '../../../menu';
 import Menu from '../../../menu';
@@ -295,17 +295,19 @@ function FilterDropdown<RecordType>(props: FilterDropdownProps<RecordType>) {
     internalTriggerFilter(getFilteredKeysSync());
   };
 
-  const onVisibleChange = (newVisible: boolean) => {
-    if (newVisible && propFilteredKeys !== undefined) {
-      // Sync filteredKeys on appear in controlled mode (propFilteredKeys !== undefined)
-      setFilteredKeysSync(wrapStringListType(propFilteredKeys));
-    }
+  const onVisibleChange: DropdownProps['onOpenChange'] = (newVisible, info) => {
+    if (info.source === 'trigger') {
+      if (newVisible && propFilteredKeys !== undefined) {
+        // Sync filteredKeys on appear in controlled mode (propFilteredKeys !== undefined)
+        setFilteredKeysSync(wrapStringListType(propFilteredKeys));
+      }
 
-    triggerVisible(newVisible);
+      triggerVisible(newVisible);
 
-    // Default will filter when closed
-    if (!newVisible && !column.filterDropdown) {
-      onConfirm();
+      // Default will filter when closed
+      if (!newVisible && !column.filterDropdown) {
+        onConfirm();
+      }
     }
   };