ant-design/ant-design

Menu.Item title tooltip is visible on mobile after Layout.Sider is collapsed with 0 width

Open

#32,402 opened on Oct 8, 2021

View on GitHub
 (5 comments) (0 reactions) (0 assignees)TypeScript (98,031 stars) (54,612 forks)batch import
Inactivehelp wanted📱Mobile Device

Description

  • I have searched the issues of this repository and believe that this is not a duplicate.

Reproduction link

Edit on CodeSandbox

Steps to reproduce

  1. Open full page version https://mmyyd.csb.app/ on mobile or in browser responsive mode
  2. Interact with the menu

Note that this bug only happens on mobile or in responsive

What is expected?

Tooltip should not be visible when menu is collapsed

What is actually happening?

See GIF https://i.imgur.com/G8wt5B4.gif

Environment Info
antd 4.16.13
React 17.0.2
System Windows 10
Browser Chrome

Contributor guide

Tech stack
reacttypescriptcss
Domain
frontend
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
Reactant design basic usageCSS responsive design
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
70
Research direction
Investigate the Menu.Item component's tooltip visibility logic when Layout.Sider is collapsed to 0 width on mobile. The issue occurs only in responsive mode. Review the Menu component in components/menu/ and the Tooltip component. Check the reproduction link and any existing comments for more context. Since there are no linked pull requests, the fix likely involves conditionally hiding the tooltip based on collapsed state or adding a media query.