angular / angular/components

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

Open
#24,476 5 comments 10 reactions 0 assignees View on GitHub
area: material/menu feature P5
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
91

Description

### 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](https://material.angular.io/components/menu/api#MatMenuDefaultOptions) to allow override this behavior with injection token.

```

...

```

### Use Case

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

![Animation](https://user-images.githubusercontent.com/12090931/155517615-63074bfb-b909-4a7a-afe8-7a15dfa57a05.gif)

**Desired Behavior**

Taken from [stackoverflow](https://stackoverflow.com/a/50953452) with similar issue.
![Animation2](https://user-images.githubusercontent.com/12090931/155519988-513f1cd9-803d-493f-993b-b10b1af9b93c.gif)

Contributor guide

Open the contributing guide

Research direction

Start by tracing the nested mat-menu mouse-leave close behavior and compare the requested delay with matTooltipShowDelay. Define how matMenuNestedCloseDelay should be exposed on mat-menu and MatMenuDefaultOptions, then verify the delayed-close behavior and injection-token override with the menu's existing tests.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
frontend
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.