From 5fa08c5f8894d6b23570fcd9e2c7bc1ca3d50f01 Mon Sep 17 00:00:00 2001
From: Segun Adebayo <joseshegs@gmail.com>
Date: Mon, 30 Dec 2024 18:36:19 +0000
Subject: [PATCH] fix(popper): hideWhenDetached

---
 .changeset/shy-days-kick.md                    |  6 ++++++
 packages/utilities/popper/src/get-placement.ts | 17 ++++++++++++-----
 2 files changed, 18 insertions(+), 5 deletions(-)
 create mode 100644 .changeset/shy-days-kick.md

diff --git a/.changeset/shy-days-kick.md b/.changeset/shy-days-kick.md
new file mode 100644
index 0000000000..89a6c82129
--- /dev/null
+++ b/.changeset/shy-days-kick.md
@@ -0,0 +1,6 @@
+---
+"@zag-js/popper": patch
+---
+
+Fix issue where `positioning.hideWhenDetached` doesn't remove the `visibility:hidden` attached to the positioner when
+reference comes back into view
diff --git a/packages/utilities/popper/src/get-placement.ts b/packages/utilities/popper/src/get-placement.ts
index bae4594f51..1990b65be8 100644
--- a/packages/utilities/popper/src/get-placement.ts
+++ b/packages/utilities/popper/src/get-placement.ts
@@ -1,6 +1,6 @@
 import type { AutoUpdateOptions, Middleware, Placement } from "@floating-ui/dom"
 import { arrow, autoUpdate, computePosition, flip, hide, limitShift, offset, shift, size } from "@floating-ui/dom"
-import { getWindow, raf } from "@zag-js/dom-query"
+import { getComputedStyle, getWindow, raf } from "@zag-js/dom-query"
 import { compact, isNull, noop, runIfFn } from "@zag-js/utils"
 import { getAnchorElement } from "./get-anchor"
 import { rectMiddleware, shiftArrowMiddleware, transformOriginMiddleware } from "./middleware"
@@ -175,15 +175,22 @@ function getPlacementImpl(referenceOrVirtual: MaybeRectElement, floating: MaybeE
     floating.style.setProperty("--x", `${x}px`)
     floating.style.setProperty("--y", `${y}px`)
 
-    if (options.hideWhenDetached && pos.middlewareData.hide?.referenceHidden) {
-      floating.style.setProperty("visibility", "hidden")
+    if (options.hideWhenDetached) {
+      const isHidden = pos.middlewareData.hide?.referenceHidden
+      if (isHidden) {
+        floating.style.setProperty("visibility", "hidden")
+        floating.style.setProperty("pointer-events", "none")
+      } else {
+        floating.style.removeProperty("visibility")
+        floating.style.removeProperty("pointer-events")
+      }
     }
 
     const contentEl = floating.firstElementChild
 
     if (contentEl) {
-      const zIndex = win.getComputedStyle(contentEl).zIndex
-      floating.style.setProperty("--z-index", zIndex)
+      const styles = getComputedStyle(contentEl)
+      floating.style.setProperty("--z-index", styles.zIndex)
     }
   }