Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Bug]: Tooltip doesn't show when entering the list item for the first time by keyboard #33646

Open
2 tasks done
Xiaohui0503 opened this issue Jan 14, 2025 · 2 comments
Open
2 tasks done

Comments

@Xiaohui0503
Copy link

Component

Tooltip

Package version

9.42.0

React version

18

Environment

Web

Current Behavior

Tooltip doesn't show when entering the list item for the first time by keyboard

Expected Behavior

Tooltip should show when entering the list item for the first time by keyboard

Reproduction

https://stackblitz.com/edit/ruhioawp?file=src%2Fexample.tsx

Steps to reproduce

  1. Use tab key to focus on the list.
  2. Use left arrow key to focus on the button in the list item.
  3. The inner button has the tooltip, but when using keyboard focus on the button, the tooltip doesn't show

Are you reporting an Accessibility issue?

yes

Suggested severity

Urgent - No workaround and Products/sites are affected

Products/sites affected

No response

Are you willing to submit a PR to fix?

yes

Validations

  • Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
  • The provided reproduction is a minimal reproducible example of the bug.
@ValentinaKozlova
Copy link
Contributor

@Xiaohui0503, I see that in documentation it's suggested to use navigationMode="composite" but when I removed it, the tooltip started showing up. Probably this bug is not with Tooltip, but with the List/ListItem components.
Also, I noticed that Tooltip appears only while navigating inside of a list item. But Tooltip is not shown when the user goes from the top level of ListItem.

@Xiaohui0503
Copy link
Author

Hi @ValentinaKozlova , if I remove navigationMode="composite", the second button in the second list item will not be reached. Besides, in the List component document, it also suggest to use navigationMode="composite" when there are focusable elements inside each list item. (document list)

For the second point, I also find that this tooltip doesn't work when the user goes from the top level of ListItem. And tooltip will show while navigating inside of a list item.

I debug this code, and find maybe there is the root cause. (code link) Here, the isFocusedProgrammatically is true, but I'm confused why isNavigatingWithKeyboard is false here. Due to this condition, the next focus event is ignored.

Image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants