fix: account for shadow-dom in activeElement checks (#2697)

nikparo · web-flow · commit 92c0bf5f5e28 · 2025-09-10T11:36:40.000+01:00
* fix(@zag-js/focus-trap): pierce shadow-dom when returning focus * fix: isActiveElement + getActiveElement fixes * fix(dom-query): use isActiveElement for scope * fix(dom-query): a web-component does not have to have a focused child element * fix(dom-query): container and child are separate elements and can have focus separately * Revert "fix(dom-query): use isActiveElement for scope" This reverts commit 4fbcc0a. * revert: use isActiveElement in createScope functions * docs(changeset): add change details * fix: use dom-query/isActiveElement in createScope * refactor: use scope.isActiveElement wherever scope is available
diff --git a/.changeset/afraid-regions-decide.md b/.changeset/afraid-regions-decide.md
@@ -0,0 +1,5 @@
+---
+"@zag-js/dom-query": minor
+---
+
+Add isActiveElement helper and consistently pierce shadow-dom in focus checks
diff --git a/.changeset/cuddly-parrots-stand.md b/.changeset/cuddly-parrots-stand.md
@@ -0,0 +1,8 @@
+---
+"@zag-js/number-input": patch
+"@zag-js/date-picker": patch
+"@zag-js/focus-trap": patch
+"@zag-js/tags-input": patch
+---
+
+Pierce shadow-dom in focus checks
diff --git a/.changeset/shy-snails-cross.md b/.changeset/shy-snails-cross.md
@@ -0,0 +1,5 @@
+---
+"@zag-js/dom-query": patch
+---
+
+getActiveElement returns activeElement rather than null for focusable web components with no focusable children
diff --git a/packages/core/src/scope.ts b/packages/core/src/scope.ts
@@ -1,12 +1,11 @@
-import { getActiveElement, getDocument } from "@zag-js/dom-query"
+import { getActiveElement, getDocument, isActiveElement } from "@zag-js/dom-query"
 import type { Scope } from "./types"
 
 export function createScope(props: Pick<Scope, "id" | "ids" | "getRootNode">) {
   const getRootNode = () => (props.getRootNode?.() ?? document) as Document | ShadowRoot
   const getDoc = () => getDocument(getRootNode())
   const getWin = () => getDoc().defaultView ?? window
   const getActiveElementFn = () => getActiveElement(getRootNode())
-  const isActiveElement = (elem: HTMLElement | null) => elem === getActiveElementFn()
   const getById = <T extends Element = HTMLElement>(id: string) => getRootNode().getElementById(id) as T | null
   return {
     ...props,
diff --git a/packages/machines/date-picker/src/date-picker.connect.ts b/packages/machines/date-picker/src/date-picker.connect.ts
@@ -543,7 +543,7 @@ export function connect<T extends PropTypes>(
           ? (event) => {
               if (event.pointerType === "touch") return
               if (!cellState.selectable) return
-              const focus = event.currentTarget.ownerDocument.activeElement !== event.currentTarget
+              const focus = !scope.isActiveElement(event.currentTarget)
               if (hoveredValue && isEqualDay(value, hoveredValue)) return
               send({ type: "CELL.POINTER_MOVE", cell: "day", value, focus })
             }
@@ -594,7 +594,7 @@ export function connect<T extends PropTypes>(
           ? (event) => {
               if (event.pointerType === "touch") return
               if (!cellState.selectable) return
-              const focus = event.currentTarget.ownerDocument.activeElement !== event.currentTarget
+              const focus = !scope.isActiveElement(event.currentTarget)
               if (hoveredValue && cellState.value && isEqualDay(cellState.value, hoveredValue)) return
               send({ type: "CELL.POINTER_MOVE", cell: "month", value: cellState.value, focus })
             }
diff --git a/packages/machines/number-input/src/cursor.ts b/packages/machines/number-input/src/cursor.ts
@@ -1,3 +1,5 @@
+import type { Scope } from "@zag-js/core"
+
 interface Selection {
   start?: number | undefined
   end?: number | undefined
@@ -6,8 +8,8 @@ interface Selection {
   afterTxt?: string | undefined
 }
 
-export function recordCursor(inputEl: HTMLInputElement | null): Selection | undefined {
-  if (!inputEl || inputEl.ownerDocument.activeElement !== inputEl) return
+export function recordCursor(inputEl: HTMLInputElement | null, scope: Scope): Selection | undefined {
+  if (!inputEl || !scope.isActiveElement(inputEl)) return
   try {
     const { selectionStart: start, selectionEnd: end, value } = inputEl
     const beforeTxt = value.substring(0, start!)
@@ -22,8 +24,8 @@ export function recordCursor(inputEl: HTMLInputElement | null): Selection | unde
   } catch {}
 }
 
-export function restoreCursor(inputEl: HTMLInputElement | null, selection: Selection | undefined) {
-  if (!inputEl || inputEl.ownerDocument.activeElement !== inputEl) return
+export function restoreCursor(inputEl: HTMLInputElement | null, selection: Selection | undefined, scope: Scope) {
+  if (!inputEl || !scope.isActiveElement(inputEl)) return
 
   if (!selection) {
     inputEl.setSelectionRange(inputEl.value.length, inputEl.value.length)
diff --git a/packages/machines/number-input/src/number-input.machine.ts b/packages/machines/number-input/src/number-input.machine.ts
@@ -432,10 +432,10 @@ export const machine = createMachine({
       syncInputElement({ context, event, computed, scope }) {
         const value = event.type.endsWith("CHANGE") ? context.get("value") : computed("formattedValue")
         const inputEl = dom.getInputEl(scope)
-        const sel = recordCursor(inputEl)
+        const sel = recordCursor(inputEl, scope)
         raf(() => {
           setElementValue(inputEl, value)
-          restoreCursor(inputEl, sel)
+          restoreCursor(inputEl, sel, scope)
         })
       },
       setFormattedValue({ context, computed }) {
diff --git a/packages/machines/tags-input/src/tags-input.dom.ts b/packages/machines/tags-input/src/tags-input.dom.ts
@@ -31,7 +31,7 @@ export const getNextEl = (ctx: Scope, id: string) => nextById(getTagElements(ctx
 
 export const getTagElAtIndex = (ctx: Scope, index: number) => getTagElements(ctx)[index]
 export const getIndexOfId = (ctx: Scope, id: string) => indexOfId(getTagElements(ctx), id)
-export const isInputFocused = (ctx: Scope) => ctx.getDoc().activeElement === getInputEl(ctx)
+export const isInputFocused = (ctx: Scope) => ctx.isActiveElement(getInputEl(ctx))
 
 export const getTagValue = (ctx: Scope, id: string | null) => {
   if (!id) return null
diff --git a/packages/utilities/dom-query/src/initial-focus.ts b/packages/utilities/dom-query/src/initial-focus.ts
@@ -1,3 +1,4 @@
+import { isActiveElement } from "./node"
 import { getTabbableEdges, getTabbables } from "./tabbable"
 
 export interface InitialFocusOptions {
@@ -30,10 +31,9 @@ export function isValidTabEvent(event: Pick<KeyboardEvent, "shiftKey" | "current
   if (!container) return false
 
   const [firstTabbable, lastTabbable] = getTabbableEdges(container)
-  const doc = container.ownerDocument || document
 
-  if (doc.activeElement === firstTabbable && event.shiftKey) return false
-  if (doc.activeElement === lastTabbable && !event.shiftKey) return false
+  if (isActiveElement(firstTabbable) && event.shiftKey) return false
+  if (isActiveElement(lastTabbable) && !event.shiftKey) return false
   if (!firstTabbable && !lastTabbable) return false
 
   return true
diff --git a/packages/utilities/dom-query/src/node.ts b/packages/utilities/dom-query/src/node.ts
@@ -37,6 +37,13 @@ export const isElementVisible = (el: Node) => {
   return el.offsetWidth > 0 || el.offsetHeight > 0 || el.getClientRects().length > 0
 }
 
+export function isActiveElement(element: Element | null | undefined): boolean {
+  if (!element) return false
+  const rootNode = element.getRootNode() as Document | ShadowRoot
+
+  return getActiveElement(rootNode) === element
+}
+
 const TEXTAREA_SELECT_REGEX = /(textarea|select)/
 
 export function isEditableElement(el: HTMLElement | EventTarget | null) {
@@ -94,7 +101,7 @@ export function getActiveElement(rootNode: Document | ShadowRoot): HTMLElement |
   let activeElement = rootNode.activeElement as HTMLElement | null
   while (activeElement?.shadowRoot) {
     const el = activeElement.shadowRoot.activeElement as HTMLElement | null
-    if (el === activeElement) break
+    if (!el || el === activeElement) break
     else activeElement = el
   }
   return activeElement
diff --git a/packages/utilities/dom-query/src/press.ts b/packages/utilities/dom-query/src/press.ts
@@ -1,5 +1,5 @@
 import { addDomEvent, getEventPoint, getEventTarget } from "./event"
-import { contains, getDocument, getWindow } from "./node"
+import { contains, getWindow, isActiveElement } from "./node"
 import { noop, pipe } from "./shared"
 import type { Point } from "./types"
 
@@ -54,7 +54,6 @@ export function trackPress(options: TrackPressOptions) {
   if (!pointerNode) return noop
 
   const win = getWindow(pointerNode)
-  const doc = getDocument(pointerNode)
 
   let removeStartListeners: VoidFunction = noop
   let removeEndListeners: VoidFunction = noop
@@ -93,7 +92,7 @@ export function trackPress(options: TrackPressOptions) {
 
     removeEndListeners = pipe(removePointerUpListener, removePointerCancelListener)
 
-    if (doc.activeElement === keyboardNode && startEvent.pointerType === "mouse") {
+    if (isActiveElement(keyboardNode) && startEvent.pointerType === "mouse") {
       startEvent.preventDefault()
     }
 
diff --git a/packages/utilities/dom-query/src/proxy-tab-focus.ts b/packages/utilities/dom-query/src/proxy-tab-focus.ts
@@ -1,4 +1,5 @@
 import { addDomEvent } from "./event"
+import { isActiveElement } from "./node"
 import { raf } from "./raf"
 import { getNextTabbable, getTabbableEdges } from "./tabbable"
 import type { MaybeElement, MaybeElementOrFn } from "./types"
@@ -29,24 +30,24 @@ function proxyTabFocusImpl(container: MaybeElement, options: ProxyTabFocusOption
 
     // if we're focused on the element after the reference element and the user tabs backwards
     // we want to focus the last tabbable element
-    if (event.shiftKey && nextTabbableAfterTrigger === doc.activeElement) {
+    if (event.shiftKey && isActiveElement(nextTabbableAfterTrigger)) {
       onFocusEnter?.()
       elementToFocus = lastTabbable
     }
     // if we're focused on the first tabbable element and the user tabs backwards
     // we want to focus the reference element
-    else if (event.shiftKey && (doc.activeElement === firstTabbable || noTabbableElements)) {
+    else if (event.shiftKey && (isActiveElement(firstTabbable) || noTabbableElements)) {
       elementToFocus = triggerElement
     }
     // if we're focused on the reference element and the user tabs forwards
     // we want to focus the first tabbable element
-    else if (!event.shiftKey && doc.activeElement === triggerElement) {
+    else if (!event.shiftKey && isActiveElement(triggerElement)) {
       onFocusEnter?.()
       elementToFocus = firstTabbable
     }
     // if we're focused on the last tabbable element and the user tabs forwards
     // we want to focus the next tabbable element after the reference element
-    else if (!event.shiftKey && (doc.activeElement === lastTabbable || noTabbableElements)) {
+    else if (!event.shiftKey && (isActiveElement(lastTabbable) || noTabbableElements)) {
       elementToFocus = nextTabbableAfterTrigger
     }
 
diff --git a/packages/utilities/dom-query/src/scope.ts b/packages/utilities/dom-query/src/scope.ts
@@ -1,5 +1,5 @@
 import { setElementValue } from "./form"
-import { getActiveElement, getDocument } from "./node"
+import { getActiveElement, getDocument, isActiveElement } from "./node"
 import type { HTMLElementWithValue } from "./types"
 
 export interface ScopeContext {
@@ -12,7 +12,7 @@ export function createScope<T>(methods: T) {
     getDoc: (ctx: ScopeContext) => getDocument(dom.getRootNode(ctx)),
     getWin: (ctx: ScopeContext) => dom.getDoc(ctx).defaultView ?? window,
     getActiveElement: (ctx: ScopeContext) => getActiveElement(dom.getRootNode(ctx)),
-    isActiveElement: (ctx: ScopeContext, elem: HTMLElement | null) => elem === dom.getActiveElement(ctx),
+    isActiveElement,
     getById: <T extends Element = HTMLElement>(ctx: ScopeContext, id: string) =>
       dom.getRootNode(ctx).getElementById(id) as T | null,
     setValue: <T extends HTMLElementWithValue>(elem: T | null, value: string | number | null | undefined) => {
diff --git a/packages/utilities/dom-query/src/tabbable.ts b/packages/utilities/dom-query/src/tabbable.ts
@@ -1,4 +1,4 @@
-import { isEditableElement, isElementVisible, isHTMLElement } from "./node"
+import { getActiveElement, isEditableElement, isElementVisible, isHTMLElement } from "./node"
 
 type IncludeContainerType = boolean | "if-empty"
 
@@ -108,7 +108,7 @@ export function getTabbableEdges(
 export function getNextTabbable(container: HTMLElement | null, current?: HTMLElement | null): HTMLElement | null {
   const tabbables = getTabbables(container)
   const doc = container?.ownerDocument || document
-  const currentElement = current ?? (doc.activeElement as HTMLElement | null)
+  const currentElement = current ?? getActiveElement(doc)
   if (!currentElement) return null
   const index = tabbables.indexOf(currentElement)
   return tabbables[index + 1] || null
diff --git a/packages/utilities/focus-trap/src/focus-trap.ts b/packages/utilities/focus-trap/src/focus-trap.ts
@@ -401,8 +401,9 @@ export class FocusTrap {
 
     if (node === undefined || (node && !isFocusable(node))) {
       // option not specified nor focusable: use fallback options
-      if (this.findContainerIndex(this.doc.activeElement as HTMLElement) >= 0) {
-        node = this.doc.activeElement
+      const activeElement = getActiveElement(this.doc)
+      if (activeElement && this.findContainerIndex(activeElement) >= 0) {
+        node = activeElement
       } else {
         const firstTabbableGroup = this.state.tabbableGroups[0]
         const firstTabbableNode = firstTabbableGroup && firstTabbableGroup.firstTabbableNode
@@ -459,7 +460,7 @@ export class FocusTrap {
 
     this.state.active = true
     this.state.paused = false
-    this.state.nodeFocusedBeforeActivation = (this.doc.activeElement as HTMLElement) || null
+    this.state.nodeFocusedBeforeActivation = getActiveElement(this.doc)
 
     onActivate?.()
 

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +"@zag-js/dom-query": minor
 +---
++
 +Add isActiveElement helper and consistently pierce shadow-dom in focus checks