[menu-item]: Clicking on disabled menu-item closes the menu #19173
Assignees
Labels
area: material/menu
P3
An issue that is relevant to core functions, but does not impede progress. Important, but not urgent
Comments
|
Looks like it's due to #16696 which was put in place to normalize some browser inconsistencies. |
crisbeto
added
has pr
P3
crisbeto
added a commit
to crisbeto/material2
that referenced
this issue
Apr 27, 2020
We have some logic to prevent clicks on disabled items from closing the menu. The problem is that browsers swallow clicks and don't fire their event listeners for disabled `button` nodes, but not any non-disabled child nodes. In angular#16696 we made it consistent so clicks don't land on any of the button's elements, but these changes fix the underlying issue by binding the event both on the root `button`, and a wrapper `span` that's around the content. This way we're guaranteed to hit at least one of the listeners. These changes also move the event outside the `NgZone` since it doesn't trigger any changes in the view. Fixes angular#19173.
crisbeto
added a commit
to crisbeto/material2
that referenced
this issue
Apr 27, 2020
We have some logic to prevent clicks on disabled items from closing the menu. The problem is that browsers swallow clicks and don't fire their event listeners for disabled `button` nodes, but not any non-disabled child nodes. In angular#16696 we made it consistent so clicks don't land on any of the button's elements, but these changes fix the underlying issue by binding the event both on the root `button`, and a wrapper `span` that's around the content. This way we're guaranteed to hit at least one of the listeners. These changes also move the event outside the `NgZone` since it doesn't trigger any changes in the view. Fixes angular#19173.
crisbeto
added a commit
to crisbeto/material2
that referenced
this issue
Jun 27, 2020
We have some logic to prevent clicks on disabled items from closing the menu. The problem is that browsers swallow clicks and don't fire their event listeners for disabled `button` nodes, but not any non-disabled child nodes. In angular#16696 we made it consistent so clicks don't land on any of the button's elements, but these changes fix the underlying issue by binding the event both on the root `button`, and a wrapper `span` that's around the content. This way we're guaranteed to hit at least one of the listeners. These changes also move the event outside the `NgZone` since it doesn't trigger any changes in the view. Fixes angular#19173.
crisbeto
added a commit
to crisbeto/material2
that referenced
this issue
Nov 3, 2020
We have some logic to prevent clicks on disabled items from closing the menu. The problem is that browsers swallow clicks and don't fire their event listeners for disabled `button` nodes, but not any non-disabled child nodes. In angular#16696 we made it consistent so clicks don't land on any of the button's elements, but these changes fix the underlying issue by binding the event both on the root `button`, and a wrapper `span` that's around the content. This way we're guaranteed to hit at least one of the listeners. These changes also move the event outside the `NgZone` since it doesn't trigger any changes in the view. Fixes angular#19173.
crisbeto
added a commit
to crisbeto/material2
that referenced
this issue
Nov 3, 2020
We have some logic to prevent clicks on disabled items from closing the menu. The problem is that browsers swallow clicks and don't fire their event listeners for disabled `button` nodes, but not any non-disabled child nodes. In angular#16696 we made it consistent so clicks don't land on any of the button's elements, but these changes fix the underlying issue by binding the event both on the root `button`, and a wrapper `span` that's around the content. This way we're guaranteed to hit at least one of the listeners. These changes also move the event outside the `NgZone` since it doesn't trigger any changes in the view. Fixes angular#19173.
crisbeto
added a commit
to crisbeto/material2
that referenced
this issue
Nov 3, 2020
We have some logic to prevent clicks on disabled items from closing the menu. The problem is that browsers swallow clicks and don't fire their event listeners for disabled `button` nodes, but not any non-disabled child nodes. In angular#16696 we made it consistent so clicks don't land on any of the button's elements, but these changes fix the underlying issue by binding the event both on the root `button`, and a wrapper `span` that's around the content. This way we're guaranteed to hit at least one of the listeners. These changes also move the event outside the `NgZone` since it doesn't trigger any changes in the view. Fixes angular#19173.
crisbeto
added a commit
to crisbeto/material2
that referenced
this issue
Apr 1, 2021
We have some logic to prevent clicks on disabled items from closing the menu. The problem is that browsers swallow clicks and don't fire their event listeners for disabled `button` nodes, but not any non-disabled child nodes. In angular#16696 we made it consistent so clicks don't land on any of the button's elements, but these changes fix the underlying issue by binding the event both on the root `button`, and a wrapper `span` that's around the content. This way we're guaranteed to hit at least one of the listeners. These changes also move the event outside the `NgZone` since it doesn't trigger any changes in the view. Fixes angular#19173.
crisbeto
added a commit
to crisbeto/material2
that referenced
this issue
Apr 24, 2021
We have some logic to prevent clicks on disabled items from closing the menu. The problem is that browsers swallow clicks and don't fire their event listeners for disabled `button` nodes, but not any non-disabled child nodes. In angular#16696 we made it consistent so clicks don't land on any of the button's elements, but these changes fix the underlying issue by binding the event both on the root `button`, and a wrapper `span` that's around the content. This way we're guaranteed to hit at least one of the listeners. These changes also move the event outside the `NgZone` since it doesn't trigger any changes in the view. Fixes angular#19173.
crisbeto
added a commit
to crisbeto/material2
that referenced
this issue
May 29, 2021
We have some logic to prevent clicks on disabled items from closing the menu. The problem is that browsers swallow clicks and don't fire their event listeners for disabled `button` nodes, but not any non-disabled child nodes. In angular#16696 we made it consistent so clicks don't land on any of the button's elements, but these changes fix the underlying issue by binding the event both on the root `button`, and a wrapper `span` that's around the content. This way we're guaranteed to hit at least one of the listeners. These changes also move the event outside the `NgZone` since it doesn't trigger any changes in the view. Fixes angular#19173.
crisbeto
added a commit
to crisbeto/material2
that referenced
this issue
Jul 3, 2021
We have some logic to prevent clicks on disabled items from closing the menu. The problem is that browsers swallow clicks and don't fire their event listeners for disabled `button` nodes, but not any non-disabled child nodes. In angular#16696 we made it consistent so clicks don't land on any of the button's elements, but these changes fix the underlying issue by binding the event both on the root `button`, and a wrapper `span` that's around the content. This way we're guaranteed to hit at least one of the listeners. These changes also move the event outside the `NgZone` since it doesn't trigger any changes in the view. Fixes angular#19173.
crisbeto
added a commit
to crisbeto/material2
that referenced
this issue
Aug 1, 2021
We have some logic to prevent clicks on disabled items from closing the menu. The problem is that browsers swallow clicks and don't fire their event listeners for disabled `button` nodes, but not any non-disabled child nodes. In angular#16696 we made it consistent so clicks don't land on any of the button's elements, but these changes fix the underlying issue by binding the event both on the root `button`, and a wrapper `span` that's around the content. This way we're guaranteed to hit at least one of the listeners. These changes also move the event outside the `NgZone` since it doesn't trigger any changes in the view. Fixes angular#19173.
crisbeto
added a commit
to crisbeto/material2
that referenced
this issue
Aug 1, 2021
We have some logic to prevent clicks on disabled items from closing the menu. The problem is that browsers swallow clicks and don't fire their event listeners for disabled `button` nodes, but not any non-disabled child nodes. In angular#16696 we made it consistent so clicks don't land on any of the button's elements, but these changes fix the underlying issue by binding the event both on the root `button`, and a wrapper `span` that's around the content. This way we're guaranteed to hit at least one of the listeners. These changes also move the event outside the `NgZone` since it doesn't trigger any changes in the view. Fixes angular#19173.
crisbeto
added a commit
to crisbeto/material2
that referenced
this issue
Sep 3, 2021
We have some logic to prevent clicks on disabled items from closing the menu. The problem is that browsers swallow clicks and don't fire their event listeners for disabled `button` nodes, but not any non-disabled child nodes. In angular#16696 we made it consistent so clicks don't land on any of the button's elements, but these changes fix the underlying issue by binding the event both on the root `button`, and a wrapper `span` that's around the content. This way we're guaranteed to hit at least one of the listeners. These changes also move the event outside the `NgZone` since it doesn't trigger any changes in the view. Fixes angular#19173.
crisbeto
added a commit
to crisbeto/material2
that referenced
this issue
Jan 3, 2022
We have some logic to prevent clicks on disabled items from closing the menu. The problem is that browsers swallow clicks and don't fire their event listeners for disabled `button` nodes, but not any non-disabled child nodes. In angular#16696 we made it consistent so clicks don't land on any of the button's elements, but these changes fix the underlying issue by binding the event both on the root `button`, and a wrapper `span` that's around the content. This way we're guaranteed to hit at least one of the listeners. These changes also move the event outside the `NgZone` since it doesn't trigger any changes in the view. Fixes angular#19173.
crisbeto
added a commit
to crisbeto/material2
that referenced
this issue
Mar 28, 2022
Adds an overlay on top of the content of a disabled menu item in order to capture clicks and prevent the menu from closing when clicking on it. Fixes angular#19173.
crisbeto
added a commit
that referenced
this issue
Mar 28, 2022
Adds an overlay on top of the content of a disabled menu item in order to capture clicks and prevent the menu from closing when clicking on it. Fixes #19173.
crisbeto
added a commit
that referenced
this issue
Mar 28, 2022
forsti0506
pushed a commit
to forsti0506/components
that referenced
this issue
Apr 3, 2022
…#19183) Adds an overlay on top of the content of a disabled menu item in order to capture clicks and prevent the menu from closing when clicking on it. Fixes angular#19173.
|
This issue has been automatically locked due to inactivity. Read more about our automatic conversation locking policy. This action has been performed automatically by a bot. |
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Reproduction
https://material.angular.io/components/menu/examples
Steps to reproduce:
Expected Behavior
The menu should not be closed if the menu-item is disabled
I believe below is the code for this but still, the menu gets closed
https://github.com/angular/components/blob/master/src/material/menu/menu-item.ts#L145-L146
Actual Behavior
The menu gets closed when we click.
The text was updated successfully, but these errors were encountered: