use-focus-return

Capture last focused element on the page and return focus to it once condition is met
Import

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 transition finishes:

In most cases you would want to use this hook with use-focus-trap. To use hook provide opened and transitionDuration settings:

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,
// Transition duration in ms, used to set timeout as element cannot be focused when focus trap is active
transitionDuration: 200,
// Optional Should focus be returned automatically? Defaults to true
shouldReturnFocus: true,
});

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

const returnFocus = useFocusReturn({
opened: false,
transitionDuration: 200,
shouldReturnFocus: true,
});
// ... later
returnFocus();

Definition

function useFocusReturn(settings: {
opened: boolean;
transitionDuration: number;
shouldReturnFocus?: boolean;
}): () => void;
Build fully functional accessible web applications faster than ever
Feedback
Your feedback is most valuable contribution to the project, please share how you use Mantine, what features are missing and what is done good
Leave feedback