⬅️ Back to Table of Contents

📄 index.ts

📊 Analysis Summary

Metric	Count
🔧 Functions	3
📦 Imports	6
📊 Variables & Constants	3
📐 Interfaces	1

📚 Table of Contents

• Imports
• Variables & Constants
• Functions
• Interfaces

🛠️ File Location:

📂 packages/core/useActiveElement/index.ts

📦 Imports

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

---

Variables & Constants

Name	Type	Kind	Value	Exported
document	DocumentOrShadowRoot	const	options.document ?? window?.document	✗
element	Element	let/var	document?.activeElement	✗
listenerOptions	{ capture: boolean; passive: boolean; }	const	`{
capture: true,
passive: true,
}`	✗

---

Functions

useActiveElement(options: UseActiveElementOptions): any

Code

export function useActiveElement<T extends HTMLElement>(
  options: UseActiveElementOptions = {},
) {
  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
}

• JSDoc:

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

• Parameters:

• options: UseActiveElementOptions
• Return Type: any
• Calls:
• shallowRef (from vue)
• getDeepActiveElement
• useEventListener (from ../useEventListener)
• trigger
• onElementRemoval (from ../onElementRemoval)

getDeepActiveElement(): Element

Code

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

• Return Type: Element

trigger(): void

Code

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

• Return Type: void
• Calls:
• getDeepActiveElement

---

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	✓
triggerOnRemoval	boolean	✓

---