Components: MdMenu : keep menu open on item click

[Robouste]

Bug, feature request, or proposal:

feature request

What is the expected behavior?

It would be great to have an option to keep the menu open when we click a menu item

What is the current behavior?

On item menu click, the menu closes

What are the steps to reproduce?

Plunkr

What is the use-case or motivation for changing an existing behavior?

Putting checkboxes in the menu for example

Which versions of Angular, Material, OS, browsers are affected?

All

Is there anything else we should know?

[nayfin]

I would like to utilize this feature to allow menu to take text inputs. Perhaps a new directive:

md-menu-dont-close

We could throw this on the md-menu-items that we don't want to close the menu. We will likely have some items that we wish would close the menu and others that we wouldn't. Such as a short login form with with a few inputs and a submit button. We don't want menu to close while we are trying to enter text into inputs, but we do want it to close after clicking submit.

[nayfin]

I just found this in the ReadMe:

`Not yet implemented

• ‘prevent-close' option, to turn off automatic menu close when clicking outside the menu `

Which isn't quite what we are looking for, but it's close and a good indication that similar features are being considered.

From what I've read of the source we just need to prevent click events on md-menu-items from propagating up to the menu. If anyone has some pro tips before I get started I'm happy to hear them. I'll try to put together a splunkr over the weekend and submit a PR once it's working.

[nayfin]

@Robouste Here's an ugly workaround. I'll turn it into a directive soon and update. For some reason using this with md-menu-item keeps menu open but doesn't allow inputs or checkboxes to register clicks or become focused. Take out the md-menu-item directive and everything works fine, just doesn't look quite as nice.

[Robouste]

@nayfin Thank you, it seems to do the trick. But I choose the bootstrap dropdown, more customizable (for now !)

[randallmeeker]

I have an input in my menu and this worked find
<input class="input-log" (click)="$event.stopPropagation()" type="text" />

[ccadieux]

Being able to turn this off would be great. We implemented a menu very similar to the google inbox account menu and ran into this issue. We had to add a click handler and stopPropagation on the entire menu.

[jelbourn]

Chatted w/ @kara about this and we decided that we don't want to add this as a feature to md-menu. This is largely because turning it on would be detrimental to the a11y experience (see https://www.w3.org/TR/wai-aria-practices-1.1/#menu), and we want to generally avoid adding APIs that go counter to a11y best practices.

[hghammoud]

For those who are waiting for this to be merged, this is how i did it to implement a multi-select columns in a table (i didnt want the input part of select).

I basically removed the md-menu-item directive and used the class mat-menu-item for the styling.

<md-menu #appMenu="mdMenu">
    <div *ngFor="let column of columns" class="mat-menu-item" style="overflow: visible;">
        <md-checkbox [(ngModel)]="column.show" (click)="$event.stopPropagation()" >{{column.name}}</md-checkbox>
    </div>
</md-menu>
<button md-button color="primary" [mdMenuTriggerFor]="appMenu">Select columns</button>

Hope this helps.

[mikila85]

@jelbourn @kara
Dont know what you guys talking about.. ("This is largely because turning it on would be detrimental to the a11y experience")
a11yproject.com -> Menu->Dropdown
Sends you here:
Codepen
Codepen2

Clearly shows when clicking on the menu it doesn't close.
If so many people ask for it, probably needed and will help the users.
Please reconsider and dont c**k-block your ecosystem PLZ 🥇
<3

[sarbull]

import {Directive, HostListener} from '@angular/core';

@Directive({
    selector: '[click-stop-propagation]'
})
export class ClickStopPropagation {
    @HostListener('click', ['$event'])
    public onClick(event: any): void {
        event.stopPropagation();
    }
}

<div click-stop-propagation>Stop Propagation</div>

source: https://stackoverflow.com/a/41001184/1527666

[jpike88]

turning it on would be detrimental to the a11y experience

And the irony is, blocking it from being used is detrimental to everyone's experience. Devs, and users included. I don't even know why this a11y thing is taking precedence over common sense, and established UI standards.

The only reason I'm even posting in this issue is that the angular material library has failed to provide some sort of popover component that animates from the button that was clicked, or instead opens as a full-screen overlay on narrow screens. Such a fundamental component that's been around on mobile and web forever (easily achievable on the Android and iOS SDK), which would utilise your existing components in a pretty simple way. I used to have md-panel at least:

https://material.angularjs.org/1.1.1/api/type/MdPanelPosition

But currently, I have to either twist a mat-menu to meet my needs, to use a dialog which also gives me no control over where it animates from. And what I'm making is totally fine from an accessibility standpoint...

[angular-automatic-lock-bot[bot]]

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._}