Components: Support MouseOver For Menu Instead Of Click

[davidwilcox]

Bug, feature request, or proposal:

I would like an option to be available for MdMenu that will open it when the mouse is over the menu element, and close it when the mouse leaves the menu element, or the menu dropdown.

What is the current behavior?

It seems that the main interface into MdMenu is where the user should click on it. This is unacceptable for my use case.

There is also a programmatic API. However, it will be extremely tricky for me to trigger on mouse leave of the entire menu dropdown (though I probably could do on mouse leave of the menu icon).

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

I would like to mimic a menu structure similar to what airbnb has on their site (go to airbnb.com, login and look at the user profile). It opens as soon as you mouse over it.

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

All.

[EladBezalel]

Hey @davidwilcox your use case is not part of the Material Design Specification guidelines that we aim to fully implement in Angular Material, you can implement this sort of functionality with our Overlay component and custom triggers.

CC @jelbourn

[jelbourn]

What @EladBezalel said.

[AKlaus]

Please consider the following:

• I don't see in the official guideline, that the Menu must open on clicks only. Can you point me to the right place?
• I had a look at the Overlay and they seem not helpful here.
• Overall the request looks reasonable and there are others (e.g. on Stackoverflow with a clunky solution). So maybe there is room for improvement to make it slightly less opinionated (maybe it's a request for angular/cdk).

[dmanibtech]

@EladBezalel : Any conclusion on this thread?

[EladBezalel]

Well, @AKlaus is kind of right when in the spec they don't mention "clicks only".

IMO the clunky solution is not the best but actually pretty fine.
Do you find any particular issues with that solution?
What are your expectations from the api to be?

[AKlaus]

Click/non-click

The decision on opening the menu either on click or on hovering the mouse cursor must be on the developers. From the UI/UX point of view, choosing between these two options depends on multiple factors, e.g.

• How fast you need access to the sub-items of the menu (my scenario, the user is doing something on one page and receives a phone call, so he wants to make a quick note while on the phone and have access to the "_making notes_" sub-menu ASAP, we save a click here, it's 0.5s faster to open the thing).
• How prominent the sub-menu items are? Or even maybe how ambiguous is the name of top menu-
  item (let's say it's called "_Create_" and has sub-items "note", "to do", "event". An inexperienced user may hesitate to click "_Create_" without clear understanding what would happen next).

What's wrong with that solution

• Hover the mouse cursor on the button and the menu will pop up. But if you click on the button, it will hide and show the menu. IMHO it's a bug.
• To hide the menu, the user needs to click outside of the menu. Ideally, the menu would become hidden if the mouse cursor is outside of the area (which includes the button, the menu and sub-menus) longer than 400ms.

Extra features I'd like to have

• The animation on opening the menu must be optional. Or the time/length of the animation can be specified to run it faster (it's important if you expect the menu to come up on the mouse hover event).
• Open the menu on specified keyboard shortcut

[davidwilcox]

One thing that I've thought about since filing this is that "mouseover" has no real meaning in mobile. If I'm not mistaken one big part of material design is mobile friendly. How would this work on mobile?

[EladBezalel]

@AKlaus Thanks for the detailed comment, i do get what you're saying, regarding @davidwilcox comment, we can make assure it would be 'click only' in mobile with the cdk screen size breakpoints.

@jelbourn what do you think?

[AKlaus]

@davidwilcox, from the user's perspective, it would be no difference between the "_mouse over_" and "_mouse click_" on the touch screens.

[dmanibtech]

@AKlaus - thanks for covering up the scenarios. We, infact stuck here - "..Ideally, the menu would become hidden if the mouse cursor is outside of the area (which includes the button, the menu and sub-menus)..".

We may achieve this by again a hack around, but looking forward to hear from @EladBezalel / @jelbourn

[eduardoalcantara]

The problem is that horrible cdk-overlay-backdrop that avoids a good horizontal main-menu with vertical sub-menus. Could we use horizontal mat-menus with sub-menus instead of buttons? In this case they would open on mouseenter...

[ghost]

Any news on this issue? I don't understand why it is closed, this is a logical feature request since the overhead of workaround is too much and not complete as expected.

[AbhinavMukesh]

Do we have a solution to the problem we discussed in this issue?

[speige]

+1

[AaronLavers]

I like how 90% of common, expected, broadly understood user interface patterns are disregarded by the material team here because it's 'not in the material spec'.

[agiratech-vigneshm]

@AaronLavers I second you on this sir, They're trying to follow it as Bible I guess.

[Regenhardt]

The problem I see with the material spec: It's written for mobile. So a mouse over or mouse enter simply isn't being ocnsidered. mobile-frinedly doesn't necessarily mean mobile-first.
This is definitely something to be desired when using a mouse.

[Saif03]

The funny thing is, that sub menus automatically open up on hover, but there is no configuration supported for main menus. Is there any workaround to fix issues mentioned by @AKlaus in the attached SO answer?

[Marshal27]

Solution provided here How to open and close Angular mat menu on hover

[gshireesh]

@Marshal27, solution provided is breaking in touch devices.
expected: should open on touch and stay till tap
current: but menu getting automatically closed.

[Marshal27]

@gshireesh the solution provided in the stackblitz link of the Stack Overflow answer has the expected behavior you described, via my Android device. Please review the stackbkitz, also post additional details via Stack Overflow if the stackblitz is not working for you.

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