FocusTrap

A component that creates a focus trap around the wrapped element/component. By default a focus trap is deactive. A deactivated focus trap is not doing anything – except rendering its default slot. You activate a focus trap by setting the active-prop to true. You may deactivate the focus tras at any time by setting the value of active to false.

Props

active

Type: Boolean

Default: false

By default a focus trap is not active.

Whether or not the focus trap is active. An active focus trap ensures that the focus never leaves the wrapped element/component.

deactivationMode

Type: String

Valid values are on-esc and manual.

Default: on-esc

'on-esc' – by default the trap is deactivated when the user hits ESC (of if you trigger the deactivation manually). You can also set deactivationMode to manual. In that case you have to deactivate the trap manually by setting active to false or by calling deactivate.

Specify how the focus trap should be deactivated. If set to manual you have to explicitely deactivate the focus trap (either by setting active to false or by calling deactivate).

Events

activate

Trigged when the traps activates

Arguments:

• the new value for active – in this case the value if always true

deactivate

Trigged when the traps deactivates

Arguments:

• the new value for active – in this case the value if always false