From 9a46e675909ebe9546fe022c98d2f2dc50ebd8e8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=B0=8F=E8=B1=AA?= <1844749591@qq.com> Date: Tue, 14 Jan 2025 23:57:04 +0800 Subject: [PATCH] fix(menu): disabled MenuItem with link should prevent click and show not-allowed cursor --- .../__snapshots__/demo-extend.test.ts.snap | 68 +++++++++++++++++++ .../__snapshots__/demo.test.tsx.snap | 16 +++++ components/menu/__tests__/index.test.tsx | 28 ++++++++ components/menu/demo/extra-style.tsx | 5 ++ components/menu/style/index.ts | 2 + 5 files changed, 119 insertions(+) diff --git a/components/menu/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/menu/__tests__/__snapshots__/demo-extend.test.ts.snap index b9fd68c7404d..0e72d877733b 100644 --- a/components/menu/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/menu/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -1856,6 +1856,40 @@ exports[`renders components/menu/demo/extra-style.tsx extend context correctly 1 /> + +
+
+
+ +
+ +
+
+
+ +
diff --git a/components/menu/__tests__/__snapshots__/demo.test.tsx.snap b/components/menu/__tests__/__snapshots__/demo.test.tsx.snap index 316ebe040149..ac71b269eba4 100644 --- a/components/menu/__tests__/__snapshots__/demo.test.tsx.snap +++ b/components/menu/__tests__/__snapshots__/demo.test.tsx.snap @@ -893,6 +893,22 @@ exports[`renders components/menu/demo/extra-style.tsx correctly 1`] = ` + diff --git a/components/menu/__tests__/index.test.tsx b/components/menu/__tests__/index.test.tsx index 24f90648463b..3d3406836eef 100644 --- a/components/menu/__tests__/index.test.tsx +++ b/components/menu/__tests__/index.test.tsx @@ -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( + + Disabled Link + + ), + }, + ]} + />, + ); + 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', + }); + }); }); diff --git a/components/menu/demo/extra-style.tsx b/components/menu/demo/extra-style.tsx index a393ebc5e7c9..a25c646c9e22 100644 --- a/components/menu/demo/extra-style.tsx +++ b/components/menu/demo/extra-style.tsx @@ -25,6 +25,11 @@ const items1: MenuItem[] = [ label: 'Option 2', extra: '⌘P', }, + { + key: '3', + label: Link Option, + disabled: true, + }, ], }, ]; diff --git a/components/menu/style/index.ts b/components/menu/style/index.ts index 5d704689c25b..275f60f59c37 100644 --- a/components/menu/style/index.ts +++ b/components/menu/style/index.ts @@ -474,6 +474,8 @@ const genMenuItemStyle = (token: MenuToken): CSSObject => { a: { color: 'inherit !important', + cursor: 'not-allowed', + pointerEvents: 'none', }, [`> ${componentCls}-submenu-title`]: {