@lexical/react/useLexicalFocusTrapRef

Functions

useLexicalFocusTrapRef()

useLexicalFocusTrapRef(isActive, initialFocus?, allowOutside?): RefCallback<HTMLElement>

Defined in: packages/lexical-react/src/useLexicalFocusTrapRef.ts:38

Returns a RefCallback that registers the attached DOM element as a focus-trap container with FocusTrapExtension. The trap activates when isActive is true and the element is mounted, and is released when the element detaches or isActive becomes false.

const trapRef = useLexicalFocusTrapRef(true, 'container');
return <div ref={trapRef} tabIndex={-1}>…</div>;

allowOutside is the escape hatch for descendants that portal outside the container (autocomplete popups, tooltips): return true for those targets so the trap lets them keep focus instead of pulling it back. It is held in a ref and read at event time, so passing an inline lambda is fine — it does not re-create the trap on every render.

Multiple elements can use this hook simultaneously — each gets its own independent focus trap.

Requires FocusTrapExtension in the editor's extension tree.

Parameters

isActive

boolean

initialFocus?

FocusTrapInitialFocus = 'firstFocusable'

allowOutside?

(target) => boolean

Returns

RefCallback<HTMLElement>

References

FocusTrapInitialFocus

Re-exports FocusTrapInitialFocus