Unstable_TrapFocus API

The API documentation of the Unstable_TrapFocus React component. Learn more about the props and the CSS customization points.

Import

import Unstable_TrapFocus from '@material-ui/core/Unstable_TrapFocus';
// or
import { Unstable_TrapFocus } from '@material-ui/core';

You can learn more about the difference by reading this guide.

Utility component that locks focus inside the component.

Name	Type	Default	Description
children	element		A single child content element. ⚠️ Needs to be able to hold a ref.
disableAutoFocus	bool	false	If `true`, the trap focus will not automatically shift focus to itself when it opens, and replace it to the last focused element when it closes. This also works correctly with any trap focus children that have the `disableAutoFocus` prop. Generally this should never be set to `true` as it makes the trap focus less accessible to assistive technologies, like screen readers.
disableEnforceFocus	bool	false	If `true`, the trap focus will not prevent focus from leaving the trap focus while open. Generally this should never be set to `true` as it makes the trap focus less accessible to assistive technologies, like screen readers.
disableRestoreFocus	bool	false	If `true`, the trap focus will not restore focus to previously focused element once trap focus is hidden.
getDoc*	func		Return the document to consider. We use it to implement the restore focus between different browser documents.
isEnabled*	func		Do we still want to enforce the focus? This prop helps nesting TrapFocus elements.
open*	bool		If `true`, focus is locked.

The component cannot hold a ref.