Focus Lock

Lock focus to a particular element in the document

Import

import { FocusLock } from '@hover/blueprint';

Usage

Trap focus to a specific portion of the document. This is useful for modals, popovers, and other floating elements that appear above the page's content.

import FocusLock from '@hover/blueprint';
const JailForAFocus = ({ onClose }) => (
  <FocusLock>
    You can not leave this form
    <button onClick={onClose} />
  </FocusLock>
);

API

Note
This is Chakra's wrapper around the react-focus-lock library. See the @chakra-ui/focus-lock package and react-focus-lock documentation for more information.

Option	Type	Default	Description
`initialFocusRef`	`React.RefObject<FocusableElement>`	-	`ref` of the element to receive focus initially
`finalFocusRef`	`React.RefObject<FocusableElement>`	-	`ref` of the element to return focus to when `FocusLock` unmounts
`contentRef`	`React.RefObject<HTMLElement>`	-	The `ref` of the wrapper for which the focus-lock wraps
`restoreFocus`	`boolean`	`false`	If `true`, focus will be restored to the element that triggered the `FocusLock` once it unmounts
`children`	`React.ReactNode`	-	The component to render
`isDisabled`	`boolean`	`false`	If `true`, focus trapping will be disabled
`autoFocus`	`boolean`	`false`	If `true`, the first focusable element within the `children` will auto-focused once `FocusLock` mounts
`persistentFocus`	`boolean`	`false`	If `true`, disables text selections inside, and outside focus lock
`lockFocusAcrossFrames`	`boolean`	`false`	Enables aggressive focus capturing within iframes

Blueprint

Settings

Focus Lock

Import

Usage

API

Note