mui / mui/material-ui

[Tooltip] All click events are overridden inside the tooltip

Open
#34,813 9 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

scope: tooltip type: bug
Dominant language
JavaScript
Stars
99.1k
Forks
32.5k
Avg merge
2d 17h
Merged PRs (30d)
106

Description

Duplicates
  • I have searched the existing issues
Latest version
  • I have tested the latest version
Steps to reproduce 🕹

https://codesandbox.io/s/kind-kowalevski-xnncgc?file=/demo.tsx

  1. Click the icon button. (Just hovering doesn't reproduce the issue.)
  2. Click the link, or try to select the tooltip text.
Current behavior 😯

The tooltip closes on the second mousedown event, and the link doesn't open.

Expected behavior 🤔

The tooltip stays open on the second mousedown events, so that the link opens.

Context 🔦

The link opens if you only hover the icon button.

We're using the following imperfect workaround (added to default props of Tooltip):

    PopperProps: {
      onPointerDown: e => {
        if (
          e.target instanceof Element &&
          !e.target.classList.contains("MuiTooltip-tooltip")
        ) {
          e.preventDefault();
        }
      },
    },
Your environment 🌎

Chrome - Version 106.0.5249.119 (Official Build) (x86_64)
macOS Monterey 12.6

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the linked CodeSandbox reproduction and inspect the Tooltip behavior involving PopperProps and pointer or mouse-down events. Confirm the second mousedown closes the tooltip and prevents the link from opening; done means the tooltip remains open long enough for the link to open and for text selection to work.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.