adobe / react-spectrum

A collection of libraries and tools that help you build adaptive, accessible, and robust user experiences.
https://react-spectrum.adobe.com
Apache License 2.0
13.03k stars 1.13k forks source link

Clicks on tooltips are propagated to parent components #4480

Open snow893 opened 1 year ago

snow893 commented 1 year ago

๐Ÿ› Bug Report

Tooltip click propagates to parent div. It's possible to click it by mousing over where the arrow is and onto the tooltip.

๐Ÿค” Expected Behavior

Clicking tooltip shouldn't propagate to parent divs.

๐Ÿ˜ฏ Current Behavior

When there's a tooltip trigger within a parent div, clicking on the tooltip propagates the click event to the parent div. This effectively makes it click whatever's underneath it.

๐Ÿ’ Possible Solution

https://github.com/adobe/react-spectrum/pull/4479

๐Ÿ”ฆ Context

Currently in our app we have to do the following: const handleOverlayClick = (e: React.MouseEvent) => { resetLiveEdit(selectedField?.id); if ((e.target as Element).className?.match(/^spectrum-Tooltip/)) { return; }

This is clearly not ideal.

๐Ÿ’ป Code Sample

Left tooltip as always open, but it's easily reproducible with normal hover open behavior. https://codesandbox.io/s/tooltip-j54xrm?file=/src/App.js

๐ŸŒ Your Environment

Software Version(s)
react-spectrum
Browser
Operating System

๐Ÿงข Your Company/Team

๐Ÿ•ท Tracking Issue (optional)

snowystinger commented 1 year ago

Reopening because we'll solve this a different way reverting - https://github.com/adobe/react-spectrum/pull/4535

After a team discussion, we've decided to address this in all of our portalled components using something like https://github.com/facebook/react/issues/11387#issuecomment-1548827669 and provide guidance in our FAQ on how to ignore events that come through a portal.

mryechkin commented 1 month ago

Hi @snowystinger, just wondering if the team has an idea of when this fix will be worked on?

We're currently looking at utilizing the Tooltip from RAC, but running into this issue as well. The particular use case is an element with a tooltip that's within a modal - clicking on the tooltip container causes the entire modal to close.

Thanks

snowystinger commented 1 month ago

Unfortunately, it doesn't fit in the current priorities for the team. If you need it soon, the fastest way to get it discussed/reviewed is to submit a PR. This has the benefit that you can use tools like patch-package in the meantime so that it will eventually match.