fix(useHideOthers): fix edge case with useHideOthers when nested in a a native popover

[plycos]

resolves #2240

this should also fix it for other elements that are using native popover.

Summary

Fixes useHideOthers applying aria-hidden when nested inside a closed native popover.

Problem

When a component using useHideOthers is inside a native <div popover>, it runs even when the popover is closed.

Solution

Skip hideOthers when inside a closed native popover. This is a simple non-reactive fix. It doesn't track when the popover opens/closes. Could be made reactive if needed.

Summary by CodeRabbit

• Bug Fixes
  • Fixed behavior of native popovers to properly manage visibility of surrounding elements when popovers are closed.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[zernonia]

@coderabbitai review please

[coderabbitai]

📝 Walkthrough

Walkthrough

Modified the useHideOthers guard condition to prevent applying aria-hidden attributes when the target element resides within a closed native popover, addressing an issue where combobox elements with open=true incorrectly hid other page elements.

Changes

Cohort / File(s)	Summary
Popover Visibility Guard packages/core/src/shared/useHideOthers.ts	Added conditional check to prevent hideOthers invocation for elements inside closed popovers; reverts previous undo state if condition fails

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

Poem

🐰 A popover's secrets stay hidden away,
No aria-shadows on others today,
We guard the gate with a gentle condition—
When popovers sleep, so does our mission!
A hop, skip, and fix makes accessibility bright! ✨

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly describes the specific fix: addressing an edge case with useHideOthers when nested in a native popover.
Linked Issues check	✅ Passed	The changes directly address issue #2240 by skipping hideOthers when inside a closed native popover, preventing incorrect aria-hidden application.
Out of Scope Changes check	✅ Passed	The changes are narrowly focused on fixing the conditional logic in useHideOthers and are directly scoped to resolving the linked issue.
Docstring Coverage	✅ Passed	Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

@zernonia: I'll review the changes in this PR right away.

✅ Actions performed

Review triggered.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

[coderabbitai]

Actionable comments posted: 1

📜 Review details

Configuration used: defaults

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between b6e346b and 1a8e732.

📒 Files selected for processing (1)

• packages/core/src/shared/useHideOthers.ts

[coderabbitai]

⚠️ Potential issue | 🟠 Major

🧩 Analysis chain

🌐 Web query:

:popover-open CSS pseudo-class browser support 2025

💡 Result:

Short answer — as of Jan 13, 2026: :popover-open is supported in current major browsers (Chromium-based browsers from Chrome/Edge 114+, Firefox 125+, and Safari 17+). Older browser versions do not support it. Sources: [1][2].

Sources

• Can I use (selector :popover-open) — browser support matrix. [1]
• MDN Popover API / :popover-open documentation. [2]

---

🌐 Web query:

CSS closest() method SyntaxError unsupported pseudo-class selector

💡 Result:

Element.closest(selector) uses the browser’s CSS selector parser (same as querySelector/matches). If the selector string is invalid or contains a pseudo‑class the browser doesn’t support, closest() throws a SyntaxError / DOMException (invalid selector / unsupported pseudo‑class). See MDN docs for closest() and :has() (browser support matters). [1][2]

Quick fixes

• Remove or avoid unsupported pseudo‑classes in the selector (e.g. older browsers may not support :has()). [2][1]

• Wrap the call in try/catch and fall back to manual traversal if it fails:

  try { node.closest(selector); }
  catch (e) { /* fallback: traverse parents and use matches() or custom logic */ }

• Use :is() / :where() when possible to make selector lists forgiving, or include a polyfill for unsupported selectors (or for :has()). [3][1]

If you paste the exact selector and target browsers you need to support, I can suggest a minimal fallback or polyfill.

---

Wrap in try-catch to handle browsers without :popover-open support.

The logic correctly skips hideOthers when inside a closed popover. However, closest() with the :popover-open pseudo-class throws a SyntaxError in browsers without Popover API support (Chrome <114, Firefox <125, Safari <17).

Wrap the selector in try-catch for graceful fallback:

Defensive fix

     // Skip if inside a closed native popover
-    if (el && !el.closest('[popover]:not(:popover-open)'))
+    let isInsideClosedPopover = false
+    try {
+      isInsideClosedPopover = !!el?.closest('[popover]:not(:popover-open)')
+    }
+    catch {
+      // :popover-open not supported in this browser, assume not inside closed popover
+    }
+    if (el && !isInsideClosedPopover)
       undo = hideOthers(el)

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change

	// Skip if inside a closed native popover
	if (el && !el.closest('[popover]:not(:popover-open)'))
	undo = hideOthers(el)
	else if (undo)
	undo()
	// Skip if inside a closed native popover
	let isInsideClosedPopover = false
	try {
	isInsideClosedPopover = !!el?.closest('[popover]:not(:popover-open)')
	}
	catch {
	// :popover-open not supported in this browser, assume not inside closed popover
	}
	if (el && !isInsideClosedPopover)
	undo = hideOthers(el)
	else if (undo)
	undo()