fix(menu): disabled MenuItem with link should prevent click and show …

…not-allowed cursor
aojunhao123 · Jan 14, 2025 · 9a46e67 · 9a46e67
1 parent 1ccda5f
commit 9a46e67
Show file tree

Hide file tree

Showing 5 changed files with 119 additions and 0 deletions.
diff --git 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
                 />
               </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>

diff --git 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`] = `
               </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>

diff --git 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(
+      <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',
+    });
+  });
 });
diff --git 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: <a href="https://www.baidu.com">Link Option</a>,
+        disabled: true,
+      },
     ],
   },
 ];

diff --git 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`]: {