SolidJS utility that traps focus inside a given DOM element.
- Watches for DOM changes inside the focus trap and updates accordingly
- Properly restores focus when the trap gets disabled
- Very customizable
import createFocusTrap from 'solid-focus-trap'const DialogContent: Component<{
open: boolean
}> = (props) => {
const [contentRef, setContentRef] = createSignal<HTMLElement | null>(null)
createFocusTrap({
element: contentRef,
enabled: () => props.open, // default = true
observeChanges: true, // default
restoreFocus: true, // default
})
return (
<Show when={props.open}>
<div ref={setContentRef}>Dialog</div>
</Show>
)
}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.
This example shows how to customize the initial focus element so that the focus moves to a specific element when the trap gets enabled.
const DialogContent: Component<{
open: boolean
}> = (props) => {
const [contentRef, setContentRef] = createSignal<HTMLElement | null>(null)
const [initialFocusRef, setInitialFocusRef] =
createSignal<HTMLElement | null>(null)
createFocusTrap({
element: contentRef,
enabled: () => props.open,
initialFocusElement: initialFocusRef,
})
return (
<Show when={props.open}>
<div ref={setContentRef}>Dialog</div>
<button>Close</button>
<input ref={setInitialFocusRef} />
</Show>
)
}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.