mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-06-07 17:44:35 +08:00
Code Issues Actions 18 Packages Projects Releases Wiki Activity

fix(menu): disabled MenuItem with link should prevent click and show not-allowed cursor (#52402)

Browse Source
This commit is contained in:
Jony J 2025-01-15 10:37:40 +08:00 committed by GitHub
parent 8734fdf47b
commit 35f8f89554
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 119 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
components/menu/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -1856,6 +1856,40 @@ exports[`renders components/menu/demo/extra-style.tsx extend context correctly 1
/>
</div>
</div>
<li
aria-disabled="true"
class="ant-menu-item ant-menu-item-disabled ant-menu-item-only-child"
data-menu-id="rc-menu-uuid-test-3"
role="menuitem"
style="padding-left: 48px;"
>
<span
class="ant-menu-title-content"
>
<a
href="https://www.baidu.com"
>
Link Option
</a>
</span>
</li>
<div
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
>
<div
class="ant-tooltip-arrow"
style="position: absolute; top: 0px; left: 0px;"
/>
<div
class="ant-tooltip-content"
>
<div
class="ant-tooltip-inner"
role="tooltip"
/>
</div>
</div>
</ul>
</div>
<ul
@ -1954,6 +1988,40 @@ exports[`renders components/menu/demo/extra-style.tsx extend context correctly 1
/>
</div>
</div>
<li
aria-disabled="true"
class="ant-menu-item ant-menu-item-disabled ant-menu-item-only-child"
data-menu-id="rc-menu-uuid-test-3"
role="menuitem"
style="padding-left: 48px;"
>
<span
class="ant-menu-title-content"
>
<a
href="https://www.baidu.com"
>
Link Option
</a>
</span>
</li>
<div
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
>
<div
class="ant-tooltip-arrow"
style="position: absolute; top: 0px; left: 0px;"
/>
<div
class="ant-tooltip-content"
>
<div
class="ant-tooltip-inner"
role="tooltip"
/>
</div>
</div>
</ul>
</li>
</ul>

16
components/menu/__tests__/__snapshots__/demo.test.tsx.snap
View File

@ -893,6 +893,22 @@ exports[`renders components/menu/demo/extra-style.tsx correctly 1`] = `
</span>
</span>
</li>
<li
aria-disabled="true"
class="ant-menu-item ant-menu-item-disabled ant-menu-item-only-child"
role="menuitem"
style="padding-left:48px"
>
<span
class="ant-menu-title-content"
>
<a
href="https://www.baidu.com"
>
Link Option
</a>
</span>
</li>
</ul>
</li>
</ul>

28
components/menu/__tests__/index.test.tsx
View File

@ -1165,4 +1165,32 @@ describe('Menu', () => {
expect(container.querySelector('.ant-menu-title-content-with-extra')).toBeInTheDocument();
expect(container.querySelector('.ant-menu-item-extra')?.textContent).toBe(text);
});
it('should prevent click events when disabled MenuItem with link', () => {
const onClick = jest.fn();
const { container } = render(
<Menu
mode="vertical"
items={[
{
key: '1',
disabled: true,
label: (
<a href="https://ant.design" onClick={onClick}>
Disabled Link
</a>
),
},
]}
/>,
);
const link = container.querySelector('a')!;
expect(container.querySelector('.ant-menu-item')).toHaveClass('ant-menu-item-disabled');
expect(window.getComputedStyle(link).pointerEvents).toBe('none');
expect(link).toHaveStyle({
pointerEvents: 'none',
cursor: 'not-allowed',
});
});
});

5
components/menu/demo/extra-style.tsx
View File

@ -25,6 +25,11 @@ const items1: MenuItem[] = [
label: 'Option 2',
extra: '⌘P',
},
{
key: '3',
label: <a href="https://www.baidu.com">Link Option</a>,
disabled: true,
},
],
},
];

2
components/menu/style/index.ts
View File

@ -474,6 +474,8 @@ const genMenuItemStyle = (token: MenuToken): CSSObject => {
a: {
color: 'inherit !important',
cursor: 'not-allowed',
pointerEvents: 'none',
},
[`> ${componentCls}-submenu-title`]: {