focus-trap-react demo

Return to the repository

demo one

Default behavior: When this FocusTrap mounts (and activates), the first element in its tab order receives focus.

demo two

When this FocusTrap mounts (and activates), focus jumps to a specific, manually specified element.

Also, the Escape key does not deactivate this trap: you have to click the button to deactivate.

demo three

Inspect this element and you'll see that is not the default plan div, but rather a section tag with an id, a class, inline styles, and an arbitrary data-attribute.

Also, this FocusTrap activates and deactivates while staying mounted.

ALSO, when you click outside this FocusTrap, the trap deactivates and your click carries through.

demo four

Default behavior with a twist: When this FocusTrap activates, the first element in its tab order receives focus, but because of positive tabindex attributes the tab order is not the same as the source order.

Also, when you deactivate this FocusTrap, the focus will not be returned to the button that activated it.

demo five

The trap contains an input with the autofocus attribute.

Return to the repository