Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: dropdown not trigger onOpenChange when click menu item #45378

Merged
merged 5 commits into from Oct 17, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
24 changes: 24 additions & 0 deletions components/dropdown/__tests__/index.test.tsx
Expand Up @@ -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' });
});
});
5 changes: 3 additions & 2 deletions components/dropdown/dropdown.tsx
Expand Up @@ -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;
Expand Down Expand Up @@ -194,7 +194,7 @@ const Dropdown: CompoundedComponent = (props) => {
});

const onInnerOpenChange = useEvent((nextOpen: boolean) => {
onOpenChange?.(nextOpen);
onOpenChange?.(nextOpen, { source: 'trigger' });
onVisibleChange?.(nextOpen);
setOpen(nextOpen);
});
Expand All @@ -213,6 +213,7 @@ const Dropdown: CompoundedComponent = (props) => {
});

const onMenuClick = React.useCallback(() => {
onOpenChange?.(false, { source: 'menu' });
setOpen(false);
}, []);

Expand Down
4 changes: 2 additions & 2 deletions components/dropdown/index.en-US.md
Expand Up @@ -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 |
Expand All @@ -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

Expand Down
4 changes: 2 additions & 2 deletions components/dropdown/index.zh-CN.md
Expand Up @@ -46,7 +46,7 @@ demo:
### Dropdown

| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| --- | --- | --- | --- | --- | --- |
| arrow | 下拉框箭头是否显示 | boolean \| { pointAtCenter: boolean } | false | |
| autoAdjustOverflow | 下拉框被遮挡时自动调整位置 | boolean | true | 5.2.0 |
| autoFocus | 打开后自动聚焦下拉框 | boolean | false | 4.21.0 |
Expand All @@ -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

Expand Down
22 changes: 12 additions & 10 deletions components/table/hooks/useFilter/FilterDropdown.tsx
Expand Up @@ -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';
Expand Down Expand Up @@ -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();
}
}
};

Expand Down