Skip to content

useActiveElement ​

Category
Export Size
712 B
Last Changed
7 hours ago

Reactive document.activeElement

Demo ​

Select the inputs below to see the changes
Current Active Element: null

Usage ​

js
import { useActiveElement } from '@vueuse/core'

const activeElement = useActiveElement()

watch(activeElement, (el) => {
  console.log('focus changed to', el)
})

Component Usage ​

This function also provides a renderless component version via the @vueuse/components package. Learn more about the usage.

vue
<template>
  <UseActiveElement v-slot="{ element }">
    Active element is {{ element.dataset.id }}
  </UseActiveElement>
</template>

Type Declarations ​

typescript
export interface UseActiveElementOptions
  extends ConfigurableWindow,
    ConfigurableDocumentOrShadowRoot {
  /**
   * Search active element deeply inside shadow dom
   *
   * @default true
   */
  deep?: boolean
}
/**
 * Reactive `document.activeElement`
 *
 * @see https://vueuse.org/useActiveElement
 * @param options
 */
export declare function useActiveElement<T extends HTMLElement>(
  options?: UseActiveElementOptions,
): Ref<T | null | undefined>

Source ​

Source • Demo • Docs

Contributors ​

Anthony Fu
Dominik Pschenitschni
Jake Tigchelaar
duoduoObama
vaakian X
James Garbutt
vaakian X
wheat
Alex Kozack

Changelog ​

v10.9.0 on 2/27/2024
b1426 - fix(useActiveElement/useFocusWithin): replace computedWithControl with locally tracked ref (#3815)
v10.3.0 on 7/30/2023
296dc - feat: search deeply in shadow dom (#3208)
v9.11.0 on 1/17/2023
d5321 - fix(components): mark defineComponent as pure (#2623)
v9.10.0 on 1/3/2023
07f20 - feat: support shadow roots (#2592)
ae78d - fix: ignore if relatedTarget is set (#2600)
v9.7.0 on 12/16/2022
88b44 - fix: ignore blur for relatedTarget (#2540)
v9.1.1 on 8/23/2022
c534e - fix: use computedWithControl instead of counter ref (#2093)

Released under the MIT License.