feat(menu): Add delay before closing nested menu after mouse leave

[mrmokwa]

Feature Description

Problem

When navigating through nested menu items, we must follow a tight path, otherwise it'll close the nested menu.

Proposed Solution

In the current behavior, after the mouse leave, the menu is closed.
If we add some delay, before closing the nested menu after the mouse leave event, we could leverage from better navigation.

Sugestion

Add an option (matMenuNestedCloseDelay) to change the behavior of closing the nested menu.
When this option is used, it should wait X miliseconds (similar to matTooltipShowDelay) before closing the nested menu after mouse leave.

Also add this option to MatMenuDefaultOptions to allow override this behavior with injection token.

<mat-menu #menu="matMenu" matMenuNestedCloseDelay="300">
     ...
</mat-menu>

Use Case

If I try to selected the 90 days options, througth the smallest path, it closes the nested menu.

Desired Behavior

Taken from stackoverflow with similar issue.

[mnkprs]

I can handle this issue but there are already unit tests that are in contradiction with this feature.
Ex. on menu.spec.ts line 1879: should close all the open sub-menus when the hover state is changed at the root .
What should be done in this case?

[angular-robot]

This feature request is now candidate for our backlog! In the next phase, the community has 60 days to upvote. If the request receives more than 20 upvotes, we'll move it to our consideration list.

You can find more details about the feature request process in our documentation.

[mrmokwa]

@wagnermaciel could you assist @mnkprs with this issue?

[wagnermaciel]

Hi, sorry I don't currently have the bandwidth to work on this

[angular-robot]

Just a heads up that we kicked off a community voting process for your feature request. There are 20 days until the voting process ends.

Find more details about Angular's feature request process in our documentation.