angular / angular/components

feat(CdkMenu): Option to disable typeahead in CdkMenu

Ouverte
#30,384 1 commentaire 0 réactions 0 personnes assignées Voir sur GitHub
area: cdk/menu feature P3
Langage dominant
TypeScript
Étoiles
25k
Forks
6.8k
Merge moyen
1 j 8 h
PR mergées (30 j)
91

Description

### Feature Description

We would like to add an option in the `CdkMenu` to disable the integrated TypeAhead feature.

Currently, the menu activates the TypeAhead for its `FocusKeyManager` automatically:
https://github.com/angular/components/blob/e91d5091bbf3d44cc168be458269d260a0c22c27/src/cdk/menu/menu-base.ts#L175

The proposal would be to add an input like `cdkMenuTypeAhead: boolean` which defaults to true but can be used to skip the TypeAhead activation:
```ts
this.keyManager = new FocusKeyManager(this.items).withWrap().withHomeAndEnd();
if (this.cdkMenuTypeAhead) {
this.keyManager = this.keyManager.withTypeAhead()
}
```

#### Alternative

An alternative approach might be a combination of the following features, so the described use case can be accomplished by the `CdkMenu` itself.
1. Make the current search term (`_pressedLetters`) publicly available, so it can be displayed.
2. Two variants to extend the current search logic:
2.a Add a secondary `includes` search to the current `startsWith`.
2.b Make the search logic customizable with configurable predicate function.

### Use Case

The use case is a custom search feature for our menus, which conflicts with the integrated TypeAhead.
We want to display the current search term and search by `startsWith` & `includes`.

![Image](https://github.com/user-attachments/assets/9a9823aa-e645-4c02-98c8-71e8361e8178) ![Image](https://github.com/user-attachments/assets/be067fd8-0133-498d-a702-b3534632be16)

***

**🗨 I would appreciate some feedback, if this feature has a chance of being accepted. Then I can prepare a PR for this.**

Guide de contribution

Ouvrir le guide de contribution

Piste de recherche

Commencez dans src/cdk/menu/menu-base.ts, au niveau de la configuration de FocusKeyManager autour de la ligne liée, puis suivez la manière dont les entrées de CdkMenu sont déclarées et dont typeahead est activé. La modification est terminée lorsque le menu peut désactiver typeahead tout en conservant le comportement par défaut actuel ; consultez les tests de menu existants, s’ils sont disponibles, pour vérifier les deux chemins.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Évaluation

Stack technique
angular, typescript
Domaine
frontend
Type d'issue
Fonctionnalité
Difficulté
3/5
Temps estimé
1-2 jours
Activité
À l'abandon
Clarté
Plutôt claire
Accessibilité débutants
35/100

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.