angular / angular/components

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

Aperta
#24,476 5 commenti 10 reazioni 0 assegnatari Vedi su GitHub
area: material/menu feature P5
Lingua principale
TypeScript
Stelle
25k
Fork
6.8k
Merge medio
1g 8h
PR unite (30g)
91

Descrizione

### 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)

Guida per i contributori

Apri la guida per i contributori

Direzione di ricerca

Inizia tracciando il comportamento di chiusura dei mat-menu annidati quando il mouse li lascia e confronta il ritardo richiesto con matTooltipShowDelay. Definisci come esporre matMenuNestedCloseDelay su mat-menu e MatMenuDefaultOptions, quindi verifica il comportamento di chiusura ritardata e l'override di injection-token con i test esistenti del menu.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Valutazione

Stack tecnologico
angular, typescript
Ambito
frontend
Tipo di issue
Funzionalità
Difficoltà
4/5
Tempo stimato
3-5 giorni
Stato di attività
Ferma
Chiarezza
Abbastanza chiara
Idoneità per principianti
35/100

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.