ant-design / ant-design/pro-components

🐛[BUG]Layout 会自动给 http url 加上跳转事件

Open
#8,411 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
4.8k
Forks
1.4k
Avg merge
10h 44m
Merged PRs (30d)
3

Description

提问前先看看:

https://github.com/ryanhanwu/How-To-Ask-Questions-The-Smart-Way/blob/main/README-zh_CN.md

### 🐛 bug 描述
问题背景是我们想给 Menu 加 tooltip, 但是 antd 有一个 `a::before` 的样式覆盖了 a 标签,导致 tooltip 不生效,([antd issue](https://github.com/ant-design/ant-design/issues/48934))

为了解决这个问题,我们重设了 `a::before` 的样式,但是此时如果点击一个 http 链接,则会打开 2 个窗口。

这个原因是,ProLayout 内部会给 http 的链接绑定跳转事件([ProLayout 代码](https://github.com/ant-design/pro-components/blob/master/packages/layout/src/components/SiderMenu/BaseMenu.tsx#L428)),当我们在 `menuItemRender` 包装 `a` 标签时,由于解决上面 tooltip 的问题去掉了蒙层,就会导致一个点击事件,会被 `span` 和 `a` 都处理,就会导致打开 2 个窗口。

### 📷 复现步骤
https://stackblitz.com/edit/vitejs-vite-3bbuza?file=src%2FApp.tsx
- 点击“一级页面” 会出现 2 个窗口;
- 注释 `./App.css` 的内容,只会打开 1 个窗口,但是 tooltip 不生效;

### 🏞 期望结果
不要给 http url 注册 `window.open`, 交给使用方处理。

### 💻 复现代码

### © 版本信息

- ProComponents 版本: "@ant-design/pro-layout": "^7.19.0",
- umi 版本
- 浏览器环境: Chrome
- 开发环境 mac OS

### 🚑 其他信息

Contributor guide

Open the contributing guide

Research direction

Start with packages/layout/src/components/SiderMenu/BaseMenu.tsx at the linked navigation logic, then reproduce the issue using the provided StackBlitz example and its App.css. Confirm the current behavior with an http menu URL and tooltip wrapper. Done means the URL opens only once while the tooltip workaround remains effective.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.