⬅️ Back to Table of Contents

📄 useFocusWithin

📊 Analysis Summary

Metric	Count
🔧 Functions	1
📦 Imports	9
📊 Variables & Constants	3
🟢 Vue Composition API	2
📐 Interfaces	1

📚 Table of Contents

• Imports
• Variables & Constants
• Vue Composition API
• Functions
• Interfaces

🛠️ File Location:

📂 packages/core/useFocusWithin/index.ts

📦 Imports

Name	Source
ComputedRef	vue
ConfigurableWindow	../_configurable
MaybeElementRef	../unrefElement
computed	vue
shallowRef	vue
defaultWindow	../_configurable
unrefElement	../unrefElement
useActiveElement	../useActiveElement
useEventListener	../useEventListener

---

Variables & Constants

Name	Type	Kind	Value	Exported
EVENT_FOCUS_IN	"focusin"	const	'focusin'	✗
EVENT_FOCUS_OUT	"focusout"	const	'focusout'	✗
PSEUDO_CLASS_FOCUS_WITHIN	":focus-within"	const	':focus-within'	✗

---

Vue Composition API

Name	Type	Reactive Variables	Composables
computed	computed	none	none
computed	computed	none	none

---

Functions

useFocusWithin(target: MaybeElementRef, options: ConfigurableWindow): UseFocusWithinReturn

Track if focus is contained within the target element

Parameters:

• target any: The target element to track
• options any: Focus within options

See: https://vueuse.org/useFocusWithin

Raw JSDoc

/**
 * Track if focus is contained within the target element
 *
 * @see https://vueuse.org/useFocusWithin
 * @param target The target element to track
 * @param options Focus within options
 */

Calls:

• computed (from vue)
• unrefElement (from ../unrefElement)
• shallowRef (from vue)
• useActiveElement (from ../useActiveElement)
• useEventListener (from ../useEventListener)
• targetElement.value?.matches

Code

export function useFocusWithin(target: MaybeElementRef, options: ConfigurableWindow = {}): UseFocusWithinReturn {
  const { window = defaultWindow } = options
  const targetElement = computed(() => unrefElement(target))
  const _focused = shallowRef(false)
  const focused = computed(() => _focused.value)
  const activeElement = useActiveElement(options)

  if (!window || !activeElement.value) {
    return { focused }
  }

  const listenerOptions = { passive: true }
  useEventListener(targetElement, EVENT_FOCUS_IN, () => _focused.value = true, listenerOptions)
  useEventListener(targetElement, EVENT_FOCUS_OUT, () =>
    _focused.value = targetElement.value?.matches?.(PSEUDO_CLASS_FOCUS_WITHIN) ?? false, listenerOptions)

  return { focused }
}

---

Interfaces

UseFocusWithinReturn

Interface Code

export interface UseFocusWithinReturn {
  /**
   * True if the element or any of its descendants are focused
   */
  focused: ComputedRef<boolean>
}

Properties

Name	Type	Optional	Description
focused	ComputedRef<boolean>	✗	not shown

---

Generated by Syntax Scribe