Skip to content

bug(cdk/overlay): cdkConnectedOverlay closes on escape even when another overlay is open #22694

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
igodorogea opened this issue May 13, 2021 · 4 comments · Fixed by #22856, #22928 or #23310
Closed

bug(cdk/overlay): cdkConnectedOverlay closes on escape even when another overlay is open #22694

igodorogea opened this issue May 13, 2021 · 4 comments · Fixed by #22856, #22928 or #23310
Assignees
@crisbeto
Labels
area: material/menu P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent

Comments

@igodorogea
Copy link

Reproduction

StackBlitz to reproduce:

Steps to reproduce:

  1. Open overlay
  2. Open menu
  3. Press Escape

Expected Behavior

Only menu is closed, overlay stays open.

Actual Behavior

Overlay and menu are both closed.

Environment

  • Angular: 11.2.x - 12.0.0
  • CDK/Material: 11.2.x - 12.0.0
  • Browser(s): Chrome, Opera, FF, Edge
  • Operating System (e.g. Windows, macOS, Ubuntu): Windows
@igodorogea igodorogea added the needs triage This issue needs to be triaged by the team label May 13, 2021
@jelbourn jelbourn changed the title bug(menu): parent overlay is closed when pressing Escape bug(cdk/overlay): cdkConnectedOverlay closes on escape even when another overlay is open May 13, 2021
@jelbourn
Copy link
Member

This is specifically the behavior of the cdkConnectedOverlay directive, which always closes on escape without doing any extra checking. To work around, you could manually use the Overlay service which gives more control over the escape behavior. Alternatively, you can set disableClose on cdkConnectedOverlay and either conditionally re-enable it or manually close on escape.

@jelbourn jelbourn added area: cdk/overlay P4 A relatively minor issue that is not relevant to core functions help wanted The team would appreciate a PR from the community to address this issue and removed needs triage This issue needs to be triaged by the team labels May 13, 2021
@igodorogea
Copy link
Author

@jelbourn are you sure that this is a bug in cdkConnectedOverlay?
There is no such issue with autocomplete or datepicker.
Both of them are somehow stopping Escape propagation.
Shouldn't menu do the same?

@jelbourn
Copy link
Member

I see- it looks like it could be fixed on either side, then.

@crisbeto crisbeto added area: material/menu P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent and removed P4 A relatively minor issue that is not relevant to core functions area: cdk/overlay help wanted The team would appreciate a PR from the community to address this issue labels Jun 1, 2021
@crisbeto crisbeto self-assigned this Jun 1, 2021
@crisbeto crisbeto added the has pr label Jun 1, 2021
crisbeto added a commit to crisbeto/material2 that referenced this issue Jun 1, 2021
@crisbeto
fix(material/menu): not interrupting keyboard events to other overlays
f56feef 
For historical reasons, `mat-menu` doesn't use the same keyboard event dispatcher as the other overlays. To work around it, previously we added a dummy subscription so that the menu would still show up in the overlay keyboard stack.

This works for most events, but it breaks down for the escape key, because closing the menu removes it from the stack immediately, allowing the event to bubble up to the document and be dispatched to the next overlay in the stack.

These changes resolve the issue by adding a `stopPropagation` call.

Fixes angular#22694.
@crisbeto crisbeto mentioned this issue Jun 1, 2021
Merged
andrewseguin pushed a commit that referenced this issue Jun 7, 2021
@crisbeto
fix(material/menu): not interrupting keyboard events to other overlays (
aeecb3c 
#22856)

For historical reasons, `mat-menu` doesn't use the same keyboard event dispatcher as the other overlays. To work around it, previously we added a dummy subscription so that the menu would still show up in the overlay keyboard stack.

This works for most events, but it breaks down for the escape key, because closing the menu removes it from the stack immediately, allowing the event to bubble up to the document and be dispatched to the next overlay in the stack.

These changes resolve the issue by adding a `stopPropagation` call.

Fixes #22694.
andrewseguin pushed a commit that referenced this issue Jun 7, 2021
@crisbeto @andrewseguin
fix(material/menu): not interrupting keyboard events to other overlays (
38aeb86 
#22856)

For historical reasons, `mat-menu` doesn't use the same keyboard event dispatcher as the other overlays. To work around it, previously we added a dummy subscription so that the menu would still show up in the overlay keyboard stack.

This works for most events, but it breaks down for the escape key, because closing the menu removes it from the stack immediately, allowing the event to bubble up to the document and be dispatched to the next overlay in the stack.

These changes resolve the issue by adding a `stopPropagation` call.

Fixes #22694.

(cherry picked from commit aeecb3c)
crisbeto added a commit to crisbeto/material2 that referenced this issue Jun 9, 2021
@crisbeto
fix(material/menu): not interrupting keyboard events to other overlays
1de1954 
This is a resubmit of angular#22856 which had some issues in g3.

For historical reasons, `mat-menu` doesn't use the same keyboard event dispatcher as the other overlays. To work around it, previously we added a dummy subscription so that the menu would still show up in the overlay keyboard stack.

This works for most events, but it breaks down for the escape key, because closing the menu removes it from the stack immediately, allowing the event to bubble up to the document and be dispatched to the next overlay in the stack.

These changes resolve the issue by adding a stopPropagation call.

Fixes angular#22694.
@crisbeto crisbeto mentioned this issue Jun 9, 2021
Merged
@angular-automatic-lock-bot
Copy link

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Jul 8, 2021
mmalerba pushed a commit to crisbeto/material2 that referenced this issue Jul 27, 2021
@crisbeto @mmalerba
fix(material/menu): not interrupting keyboard events to other overlays
d88e04f 
This is a resubmit of angular#22856 which had some issues in g3.

For historical reasons, `mat-menu` doesn't use the same keyboard event dispatcher as the other overlays. To work around it, previously we added a dummy subscription so that the menu would still show up in the overlay keyboard stack.

This works for most events, but it breaks down for the escape key, because closing the menu removes it from the stack immediately, allowing the event to bubble up to the document and be dispatched to the next overlay in the stack.

These changes resolve the issue by adding a stopPropagation call.

Fixes angular#22694.
zarend pushed a commit that referenced this issue Jul 30, 2021
@crisbeto @zarend
fix(material/menu): not interrupting keyboard events to other overlays (
e373721 
#22928)

This is a resubmit of #22856 which had some issues in g3.

For historical reasons, `mat-menu` doesn't use the same keyboard event dispatcher as the other overlays. To work around it, previously we added a dummy subscription so that the menu would still show up in the overlay keyboard stack.

This works for most events, but it breaks down for the escape key, because closing the menu removes it from the stack immediately, allowing the event to bubble up to the document and be dispatched to the next overlay in the stack.

These changes resolve the issue by adding a stopPropagation call.

Fixes #22694.

(cherry picked from commit 5f529db)
zarend pushed a commit that referenced this issue Jul 30, 2021
@crisbeto
fix(material/menu): not interrupting keyboard events to other overlays (
5f529db 
#22928)

This is a resubmit of #22856 which had some issues in g3.

For historical reasons, `mat-menu` doesn't use the same keyboard event dispatcher as the other overlays. To work around it, previously we added a dummy subscription so that the menu would still show up in the overlay keyboard stack.

This works for most events, but it breaks down for the escape key, because closing the menu removes it from the stack immediately, allowing the event to bubble up to the document and be dispatched to the next overlay in the stack.

These changes resolve the issue by adding a stopPropagation call.

Fixes #22694.
zarend pushed a commit that referenced this issue Jul 30, 2021
@crisbeto @zarend
fix(material/menu): not interrupting keyboard events to other overlays (
28b589a 
#22928)

This is a resubmit of #22856 which had some issues in g3.

For historical reasons, `mat-menu` doesn't use the same keyboard event dispatcher as the other overlays. To work around it, previously we added a dummy subscription so that the menu would still show up in the overlay keyboard stack.

This works for most events, but it breaks down for the escape key, because closing the menu removes it from the stack immediately, allowing the event to bubble up to the document and be dispatched to the next overlay in the stack.

These changes resolve the issue by adding a stopPropagation call.

Fixes #22694.

(cherry picked from commit 5f529db)
crisbeto added a commit to crisbeto/material2 that referenced this issue Aug 4, 2021
@crisbeto
fix(material/menu): not interrupting keyboard events to other overlays
71c6a6b 
This is a resubmit of angular#22856 which had some issues in g3.

For historical reasons, `mat-menu` doesn't use the same keyboard event dispatcher as the other overlays. To work around it, previously we added a dummy subscription so that the menu would still show up in the overlay keyboard stack.

This works for most events, but it breaks down for the escape key, because closing the menu removes it from the stack immediately, allowing the event to bubble up to the document and be dispatched to the next overlay in the stack.

These changes resolve the issue by adding a stopPropagation call.

Fixes angular#22694.
andrewseguin pushed a commit that referenced this issue Jan 15, 2022
@crisbeto
fix(material/menu): not interrupting keyboard events to other overlays (
864b8ae 
#23310)

This is a resubmit of #22856 which had some issues in g3.

For historical reasons, `mat-menu` doesn't use the same keyboard event dispatcher as the other overlays. To work around it, previously we added a dummy subscription so that the menu would still show up in the overlay keyboard stack.

This works for most events, but it breaks down for the escape key, because closing the menu removes it from the stack immediately, allowing the event to bubble up to the document and be dispatched to the next overlay in the stack.

These changes resolve the issue by adding a stopPropagation call.

Fixes #22694.
andrewseguin pushed a commit that referenced this issue Jan 15, 2022
@crisbeto @andrewseguin
fix(material/menu): not interrupting keyboard events to other overlays (
4182717 
#23310)

This is a resubmit of #22856 which had some issues in g3.

For historical reasons, `mat-menu` doesn't use the same keyboard event dispatcher as the other overlays. To work around it, previously we added a dummy subscription so that the menu would still show up in the overlay keyboard stack.

This works for most events, but it breaks down for the escape key, because closing the menu removes it from the stack immediately, allowing the event to bubble up to the document and be dispatched to the next overlay in the stack.

These changes resolve the issue by adding a stopPropagation call.

Fixes #22694.

(cherry picked from commit 864b8ae)
forsti0506 pushed a commit to forsti0506/components that referenced this issue Apr 3, 2022
@crisbeto @forsti0506
fix(material/menu): not interrupting keyboard events to other overlays (
338a09c 
angular#23310)

This is a resubmit of angular#22856 which had some issues in g3.

For historical reasons, `mat-menu` doesn't use the same keyboard event dispatcher as the other overlays. To work around it, previously we added a dummy subscription so that the menu would still show up in the overlay keyboard stack.

This works for most events, but it breaks down for the escape key, because closing the menu removes it from the stack immediately, allowing the event to bubble up to the document and be dispatched to the next overlay in the stack.

These changes resolve the issue by adding a stopPropagation call.

Fixes angular#22694.
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@crisbeto crisbeto

Labels
area: material/menu P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent
Projects
None yet
Milestone
No milestone
3 participants
@jelbourn @igodorogea @crisbeto