Skip to content

feat(CdkMenu): Option to disable typeahead in CdkMenu #30384

@twittwer

Description

@twittwer
Contributor

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:

this.keyManager = new FocusKeyManager(this.items).withWrap().withTypeAhead().withHomeAndEnd();

The proposal would be to add an input like cdkMenuTypeAhead: boolean which defaults to true but can be used to skip the TypeAhead activation:

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 Image


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

Activity

added
featureThis issue represents a new feature or feature request rather than a bug or bug fix
needs triageThis issue needs to be triaged by the team
on Jan 24, 2025
added
P3An issue that is relevant to core functions, but does not impede progress. Important, but not urgent
and removed
needs triageThis issue needs to be triaged by the team
on Jan 29, 2025
wagnermaciel

wagnermaciel commented on Jan 29, 2025

@wagnermaciel
Contributor

A not great but easy workaround would be to define a typeaheadLabel that's some non-typeable character

<button cdkMenuitemTypeaheadLabel="👍" cdkMenuItem>Inbox</button>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    P3An issue that is relevant to core functions, but does not impede progress. Important, but not urgentarea: cdk/menufeatureThis issue represents a new feature or feature request rather than a bug or bug fix

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @twittwer@wagnermaciel

        Issue actions

          feat(CdkMenu): Option to disable typeahead in CdkMenu · Issue #30384 · angular/components