feat(menu): Add delay before closing nested menu after mouse leave
- 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.

**Desired Behavior**
Taken from [stackoverflow](https://stackoverflow.com/a/50953452) with similar issue.

Contributor 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