Change visibility to hidden instead of opacity to 0 #2743
Description
Bug report
Current Behavior
When using hideWhenDetached, the opacity is changed to 0 instead of the visibility. This lets users click items that they cannot see. This is a horrid UX.
You can see in the video below, that the popover is properly hidden when the trigger is occluded. However, the items can still be interacted with. When I hover to inspect, you'll see that I'm inspecting the popover items, and not the stuff that you see on-screen. On clicking, the popover item is clicked.
Screen.Recording.2024-02-29.at.12.18.26.PM.mov
Expected behavior
You should, as per the @floating-ui/react-dom documentation, set the visibility to hidden instead of the opacity to 0.
https://github.com/radix-ui/primitives/blob/main/packages/react/popper/src/Popper.tsx#L271
Reproducible example
Suggested solution
Additional context
Your environment
| Software | Name(s) | Version |
|---|---|---|
| Radix Package(s) | ||
| React | n/a | |
| Browser | ||
| Assistive tech | ||
| Node | n/a | |
| npm/yarn | ||
| Operating System |