use-focus-return

Captures last focused element on the page and returns focus to it once given condition is met

Source

Docs

Package

Usage

The use-focus-return hook automatically returns focus to the last focused element when a given condition is met. For example, it is used in the Modal component to restore focus after the modal was closed.

Close the modal with the Escape key and see how focus returns to the button after the modal closes:

import { useDisclosure } from '@mantine/hooks';
import { Modal, Button } from '@mantine/core';

function Demo() {
  const [opened, { open, close }] = useDisclosure(false);

  return (
    <>
      <Modal opened={opened} onClose={close} title="Authentication">
        {/* Modal content */}
      </Modal>

      <Button variant="default" onClick={open}>
        Open modal
      </Button>
    </>
  );
}

In most cases, you should use this hook with use-focus-trap.

import { useFocusReturn } from '@mantine/hooks';

useFocusReturn({
  // Is region with focus trap active?
  // When it activates hook saves document.activeElement to the internal state
  // and focuses this element once focus trap is deactivated
  opened: false,

  // Determines whether focus should be returned automatically, true by default
  shouldReturnFocus: true,
});

If the shouldReturnFocus option is set to false, you can call the returned function to focus the last active element:

import { useFocusReturn } from '@mantine/hooks';

const returnFocus = useFocusReturn({
  opened: false,
  shouldReturnFocus: false,
});

// ... later
returnFocus();

Definition

interface UseFocusReturnOptions {
  opened: boolean;
  shouldReturnFocus?: boolean;
}

type UseFocusReturnReturnValue = () => void;

function useFocusReturn(options: UseFocusReturnOptions): UseFocusReturnReturnValue

Exported types

UseFocusReturnOptions and UseFocusReturnReturnValue types are exported from the @mantine/hooks package; you can import them in your application:

import type { UseFocusReturnOptions, UseFocusReturnReturnValue } from '@mantine/hooks';

use-floating-window

use-focus-trap