Focus trap

Use EuiFocusTrap to prevent keyboard-initiated focus from leaving a defined area. Temporary flows and UX escapes that occur in components such as EuiModal and EuiFlyout are prime examples.

For components that project content in a React portal, EuiFocusTrap will maintain the tab order expected by users.

• Use clickOutsideDisables to disable the focus trap when the user clicks outside the trap.
• Use noIsolation={false} when pointer events on outside elements should be disallowed.
• Use crossFrame={true} when focus should not be allowed on other iframes on the page.

Loading...

Props

EuiFocusTrap

𐘂𐘂

✄𐘗✄𐘗

Prop ↦	Description and type ↦	Default value ↵
Prop className# ↦	Description and type Type: string ↦	Default value ↵
Prop css# ↦	Description and type Type: Interpolation<Theme> ↦	Default value ↵
Prop style# ↦	Description and type Type: CSSProperties ↦	Default value ↵
Prop disabled# ↦	Description and type Type: boolean ↦	Default value false ↵
Prop closeOnMouseup# ↦	Description and type Whether onClickOutside should be called on mouseup instead of mousedown. This flag can be used to prevent conflicts with outside toggle buttons by delaying the closing click callback. Type: boolean ↦	Default value ↵
Prop clickOutsideDisables# ↦	Description and type Clicking outside the trap area will disable the trap Type: boolean ↦	Default value false ↵
Prop initialFocus# ↦	Description and type Reference to element that will get focus when the trap is initiated Type: ElementTarget ↦	Default value ↵
Prop gapMode# ↦	Description and type if scrollLock is set to true, the body's scrollbar width will be preserved on lock via the gapMode CSS property. Depending on your custom CSS, you may prefer to use margin instead of padding. Type: "padding" | "margin" ↦	Default value padding ↵
Prop crossFrame# ↦	Description and type Configures focus trapping between iframes. By default, EuiFocusTrap allows focus to leave iframes and move to elements outside of it. Set to true if you want focus to remain trapped within the iframe. Type: boolean ↦	Default value false ↵
Prop scrollLock# ↦	Description and type Type: boolean ↦	Default value false ↵
Prop noIsolation# ↦	Description and type Type: boolean ↦	Default value true ↵
Prop returnFocus# ↦	Description and type Type: boolean | FocusOptions | ((returnTo: Element) => boolean | FocusOptions) ↦	Default value true ↵

𐘂𐘂