Skip to main content

@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