Change visibility to hidden instead of opacity to 0

[nicholaschiang]

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

CodeSandbox Template

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

[benoitgrelard]

You are 100% correct! That is an oversight from our part, thanks for raising an issue!

[benoitgrelard]

And fixing it too! ♥️

[nicholaschiang]

One thing I want to flag here: It seems like hover: interactions with elements covered by a popover with visibility: hidden are still not triggered until the popover is closed. Clicking where the popover is registers as a click outside and closes the popover, allowing interaction with the elements underneath. I suspect pointer-events: none is needed to allow interactions with elements underneath the hidden popover.

Screen.Recording.2024-02-29.at.12.45.49.PM.mov

[benoitgrelard]

Yes that's a great point, if the intention is for it to behave as if it was already closed, then adding pointer-events: none might make sense too. Would you mind opening another PR with that change?