Skip to content

Unable to preventDefault inside passive event listener invocation. #1165

@glushkova91

Description

@glushkova91

Hello,

We have an use case of using this library together with angular cdk a11y FocusMonitor module, and in this case the first focusable element is unreachable by Tab key.

As I understood the reason is that the focus-trap library uses preventDefault inside keydown event handler in order to not let browser natively navigate to the next focusable element after programmatically setup the focus on the first element:
https://github.com/focus-trap/focus-trap/blob/master/index.js#L762

In the same time InputModalityDetector class, which is used by FocusMonitor, adds event listener to keydown event with configuration passive: true
https://github.com/angular/components/blob/main/src/cdk/a11y/input-modality/input-modality-detector.ts#L196
which prevents preventDefault.

I'm not sure if this problem can and would be considered for fix, since obviously neither library can be integrated with everything, and sometimes the most logical solution is to remove one of the libraries, but in our case we need both of them.
I didn't come up with any better suggestion as consider tracking focus event instead of keydown event (so to let browser focus on the wrong element first and then return focus back to trapped elements)

I would be happy to hear any feedback.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions