⬅️ Back to Table of Contents

📄 useActiveElement

📊 Analysis Summary

Metric	Count
🔧 Functions	3
📦 Imports	7
📐 Interfaces	1
📑 Type Aliases	1

📚 Table of Contents

• Imports
• Functions
• Interfaces
• Type Aliases

🛠️ File Location:

📂 packages/core/useActiveElement/index.ts

📦 Imports

Name	Source
ShallowRef	vue
ConfigurableDocumentOrShadowRoot	../_configurable
ConfigurableWindow	../_configurable
shallowRef	vue
defaultWindow	../_configurable
onElementRemoval	../onElementRemoval
useEventListener	../useEventListener

---

Functions

useActiveElement(options: UseActiveElementOptions): UseActiveElementReturn<T>

Reactive document.activeElement

Parameters:

• options any: No description

See: https://vueuse.org/useActiveElement

Tags: @__NO_SIDE_EFFECTS__

Raw JSDoc

/**
 * Reactive `document.activeElement`
 *
 * @see https://vueuse.org/useActiveElement
 * @param options
 *
 * @__NO_SIDE_EFFECTS__
 */

Calls:

• shallowRef (from vue)
• getDeepActiveElement
• useEventListener (from ../useEventListener)
• trigger
• onElementRemoval (from ../onElementRemoval)

Code

export function useActiveElement<T extends HTMLElement>(
  options: UseActiveElementOptions = {},
): UseActiveElementReturn<T> {
  const {
    window = defaultWindow,
    deep = true,
    triggerOnRemoval = false,
  } = options
  const document = options.document ?? window?.document

  const getDeepActiveElement = () => {
    let element = document?.activeElement
    if (deep) {
      while (element?.shadowRoot)
        element = element?.shadowRoot?.activeElement
    }
    return element
  }

  const activeElement = shallowRef<T | null | undefined>()
  const trigger = () => {
    activeElement.value = getDeepActiveElement() as T | null | undefined
  }

  if (window) {
    const listenerOptions = {
      capture: true,
      passive: true,
    }

    useEventListener(
      window,
      'blur',
      (event) => {
        if (event.relatedTarget !== null)
          return
        trigger()
      },
      listenerOptions,
    )
    useEventListener(
      window,
      'focus',
      trigger,
      listenerOptions,
    )
  }

  if (triggerOnRemoval) {
    onElementRemoval(activeElement, trigger, { document })
  }

  trigger()

  return activeElement
}

Internal helpers

Declared inside another function in this file.

getDeepActiveElement(): Element

Returns: Element

Code

() => {
    let element = document?.activeElement
    if (deep) {
      while (element?.shadowRoot)
        element = element?.shadowRoot?.activeElement
    }
    return element
  }

trigger(): void

Returns: void

Calls:

• getDeepActiveElement

Code

() => {
    activeElement.value = getDeepActiveElement() as T | null | undefined
  }

---

Interfaces

UseActiveElementOptions

Interface Code

export interface UseActiveElementOptions extends ConfigurableWindow, ConfigurableDocumentOrShadowRoot {
  /**
   * Search active element deeply inside shadow dom
   *
   * @default true
   */
  deep?: boolean
  /**
   * Track active element when it's removed from the DOM
   * Using a MutationObserver under the hood
   * @default false
   */
  triggerOnRemoval?: boolean
}

Properties

Name	Type	Optional	Description
deep	boolean	✓	not shown
triggerOnRemoval	boolean	✓	not shown

---

Type Aliases

UseActiveElementReturn<T extends HTMLElement = HTMLElement>

type UseActiveElementReturn<T extends HTMLElement = HTMLElement> = ShallowRef<T | null | undefined>;

---

Generated by Syntax Scribe