angular / angular/components

feat(CdkMenu): Option to disable typeahead in CdkMenu

Open
#30,384 1 comment 0 reactions 0 assignees View on GitHub
area: cdk/menu feature P3
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
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.**

Contributor guide

Open the contributing guide

Research direction

Start in src/cdk/menu/menu-base.ts at the FocusKeyManager setup around the linked line, then trace how CdkMenu inputs are declared and how typeahead is activated. The change is complete when the menu can opt out of typeahead while preserving the current default behavior; review existing menu tests if available to verify both paths.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
frontend
Issue type
Feature
Difficulty
3/5
Estimated time
1-2 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.