FocusTrap

Trap focus at child node

Import

Source

View source code

Docs

Edit this page

Package

@asuikit/core

Usage

FocusTrap is a component implementation of use-focus-trap hook, it is used in all Mantine components that require focus trap (Modal, DatePicker, Popover, etc.).

First input

Second input

Third input

import { useDisclosure } from '@asuikit/hooks';
import { FocusTrap, TextInput, Button, Box } from '@asuikit/core';

function Demo() {
  const [active, { toggle }] = useDisclosure(false);

  return (
    <Box maw={400} mx="auto">
      <Button onClick={toggle}>{active ? 'Deactivate' : 'Activate'} focus trap</Button>

      <FocusTrap active={active}>
        <div>
          <TextInput mt="sm" label="First input" placeholder="First input" />
          <TextInput mt="sm" label="Second input" placeholder="Second input" />
          <TextInput mt="sm" label="Third input" placeholder="Third input" />
        </div>
      </FocusTrap>
    </Box>
  );
}

Initial focus

To define the element that will receive initial focus set data-autofocus attribute:

First input

Second input

Third input

import { useDisclosure } from '@asuikit/hooks';
import { FocusTrap, TextInput, Button, Box } from '@asuikit/core';

function Demo() {
  const [active, { toggle }] = useDisclosure(false);

  return (
    <Box maw={400} mx="auto">
      <Button onClick={toggle}>{active ? 'Deactivate' : 'Activate'} focus trap</Button>

      <FocusTrap active={active}>
        <div>
          <TextInput mt="sm" label="First input" placeholder="First input" />
          <TextInput mt="sm" label="Second input" placeholder="Second input" data-autofocus />
          <TextInput mt="sm" label="Third input" placeholder="Third input" />
        </div>
      </FocusTrap>
    </Box>
  );
}

Focus trapping logic

Focus is trapped within child node if active prop is true
When FocusTrap component is mounted or when active prop changes from false to true first element with data-autofocus attribute is focused
If there are no elements with data-autofocus attribute, then the first element that supports keyboard interaction is focused
If target element does not have focusable elements or does not support ref, then focus trap will not work
Trap stops working when element outside of child is focused

Go back

Divider – @asuikit/core

Up next

Paper – @asuikit/core

FocusTrap component props

Name	Type	Description
active	boolean	Determines whether focus should be trapped within child element
children^*	any	Element at which focus should be trapped, should support ref prop
refProp	string	Prop that should be used to access component ref

Build fully functional accessible web applications faster than ever

About

Contribute About Mantine Changelog Releases

Community

Chat on Discord Follow on Twitter Follow on GitHub GitHub discussions

Project

Mantine UI Documentation GitHub organization npm organization

Built by Vitaly Rtishchev and these awesome people

Join Discord community

Follow Mantine on Twitter