Skip to content

BModal deactivates focus trap on esc key #2144

@danielvy

Description

@danielvy

Describe the bug

When using BModal with noCloseOnEsc set to true or when one of the modal's child elements wants to handle esc key and prevent dialog closure manually, pressing esc key inside the modal dialog will always deactivate the focus trap.

In this scenario scenario, the modal dialog will not close but the focus will not remain within the modal element as intended. The focus will switch to the modal element and the currently focused element inside the modal (e.g input) will lose focus (only on first time esc is pressed, after that focus trap not active anymore).

Solution:
Pass false to escapeDeactivates option to vueuse's useFocusTrap() (which will pass it to focus-trap library). Since the modal dialog closes anyway when noCloseOnEsc is false and modal dialog should never lose focus otherwise, making it the default behavior makes sense.

Reproduction

https://stackblitz.com/edit/github-cw3lum?file=src%2FApp.vue

Used Package Manager

npm

Validations

  • Have tested with the latest version. This is still alpha version and sometime things change rapidly.
  • Follow our Code of Conduct
  • Read the Contributing Guide.
  • Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
  • Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
  • The provided reproduction is a minimal reproducible of the bug.

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions