solid-focus-trap

SolidJS utility that traps focus inside a given DOM element.

Features

- Watches for DOM changes inside the focus trap and updates accordingly
- Properly restores focus when the trap gets disabled
- Very customizable

Usage

``tsx
import createFocusTrap from 'solid-focus-trap'
`

`tsx
const DialogContent: Component<{
open: boolean
}> = (props) => {
const [contentRef, setContentRef] = createSignal(null)

createFocusTrap({
element: contentRef,
enabled: () => props.open, // default = true
observeChanges: true, // default
restoreFocus: true, // default
})

return (





)
}
`

The first focusable element within the focus trap element will be focused initially. When the trap is disabled, the focus will be restored to the element that was focused before the trap was enabled.

$3

This example shows how to customize the initial focus element so that the focus moves to a specific element when the trap gets enabled.

`tsx
const DialogContent: Component<{
open: boolean
}> = (props) => {
const [contentRef, setContentRef] = createSignal(null)
const [initialFocusRef, setInitialFocusRef] =
createSignal(null)

createFocusTrap({
element: contentRef,
enabled: () => props.open,
initialFocusElement: initialFocusRef,
})

return (




Close


)
}
``

Further Reading

This utility is from the maintainers of corvu, a collection of unstyled, accessible and customizable UI primitives for SolidJS. It is also documented in the corvu docs under Focus Trap.