use-focus-return

Capture last focused element on the page and return focus to it once condition is met
Import
Source
View source code
Docs
Edit this page
Package
@mantine/hooks

Usage

use-focus-return automatically manages focus returning to last focused element when given condition is met. For example it is used in Modal component to restore focus after modal was closed.

Try closing modal with Escape key and see how focus returns to button after modal closes:

In most cases you would want to use this hook with use-focus-trap.

useFocusReturn({
  // Is region with focus trap active?
  // When it activates hook saves document.activeElement to 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 shouldReturnFocus option is set to false you can call returned function to focus last active element:

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


// ... later
returnFocus();

Definition

function useFocusReturn(options: { opened: boolean; shouldReturnFocus?: boolean }): () => void;
Go back
use-event-listener – @mantine/hooks
Up next
use-focus-trap – @mantine/hooks
Build fully functional accessible web applications faster than ever
About
ContributeAbout MantineChangelogReleases
Community
Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions
Project
Mantine UIDocumentationGithub organizationnpm organization
Built by Vitaly Rtishchev and these awesome people
Join Discord community
Follow Mantine on Twitter