fix(Popper): disable pointer events when hidden (radix-ui#2745)

* fix(Popper): disable pointer events when hidden

This patch sets `pointer-events: none` when the `<PopperContent>` is
hidden so that the UI behaves as if it is not there at all. This ensures
that users can interact with elements beneath the `<PopperContent>`
uninterrupted.

Ref: radix-ui#2743 (comment)

Fixes: e5ba0d9 ("fix(Popper): use `visibility` to hide instead of `opacity` (radix-ui#2744)")

* Move to wrapper

---------

Co-authored-by: Benoît Grélard <[email protected]>

.yarn/versions/dc4b1017.yml

@@ -0,0 +1,13 @@
+releases:
+  "@radix-ui/react-context-menu": patch
+  "@radix-ui/react-dropdown-menu": patch
+  "@radix-ui/react-hover-card": patch
+  "@radix-ui/react-menu": patch
+  "@radix-ui/react-menubar": patch
+  "@radix-ui/react-popover": patch
+  "@radix-ui/react-popper": patch
+  "@radix-ui/react-select": patch
+  "@radix-ui/react-tooltip": patch
+
+declined:
+  - primitives

packages/react/popper/src/Popper.tsx

@@ -243,6 +243,14 @@ const PopperContent = React.forwardRef<PopperContentElement, PopperContentProps>
             middlewareData.transformOrigin?.x,
             middlewareData.transformOrigin?.y,
           ].join(' '),
+
+          // hide the content if using the hide middleware and should be hidden
+          // set visibility to hidden and disable pointer events so the UI behaves
+          // as if the PopperContent isn't there at all
+          ...(middlewareData.hide?.referenceHidden && {
+            visibility: 'hidden',
+            pointerEvents: 'none',
+          }),
         }}
         // Floating UI interally calculates logical alignment based the `dir` attribute on
         // the reference/floating node, we must add this attribute here to ensure
@@ -267,8 +275,6 @@ const PopperContent = React.forwardRef<PopperContentElement, PopperContentProps>
               // if the PopperContent hasn't been placed yet (not all measurements done)
               // we prevent animations so that users's animation don't kick in too early referring wrong sides
               animation: !isPositioned ? 'none' : undefined,
-              // hide the content if using the hide middleware and should be hidden
-              visibility: middlewareData.hide?.referenceHidden ? 'hidden' : undefined,
             }}
           />
         </PopperContentProvider>