angular / angular/components

feat(CdkMenu): Option to disable typeahead in CdkMenu

Đang mở
#30,384 1 bình luận 0 reaction 0 người được giao Xem trên GitHub
area: cdk/menu feature P3
Ngôn ngữ chính
TypeScript
Star
25k
Fork
6.8k
Merge trung bình
1 ngày 8 giờ
Pull request đã merge (30 ngày)
91

Mô tả

### 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.**

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Hướng nghiên cứu

Bắt đầu trong src/cdk/menu/menu-base.ts tại phần thiết lập FocusKeyManager quanh dòng được liên kết, sau đó theo dõi cách các input của CdkMenu được khai báo và cách typeahead được kích hoạt. Thay đổi được hoàn tất khi menu có thể không sử dụng typeahead mà vẫn giữ nguyên hành vi mặc định hiện tại; hãy xem lại các bài kiểm thử menu hiện có nếu có để xác minh cả hai luồng.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Đánh giá

Công nghệ
angular, typescript
Lĩnh vực
frontend
Loại issue
Tính năng
Độ khó
3/5
Thời gian dự kiến
1-2 ngày
Mức độ hoạt động
Đình trệ
Độ rõ ràng
Khá rõ ràng
Mức phù hợp với người mới
35/100

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.