angular / angular/components

feat(Listbox): Allow Listbox to be found in content projection

Open
#26,556 3 comments 7 reactions 0 assignees View on GitHub
area: cdk/listbox feature P3
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
91

Description

### Feature Description

The Listbox cdk directive could be used as a select component's options. This would be nice because it has built in accessibilty features and keyboard interactions. The problem is if those select component options are content projected they cannot find their parent listbox directive.

### Use Case

So if I wanted my custom select component implementation to look like this:

![image](https://user-images.githubusercontent.com/26122765/216383475-edeaf89e-5798-49e3-b8fa-8b269a46cc19.png)

The custom select options are being content projected and the custom select logic would look something like this:

![image](https://user-images.githubusercontent.com/26122765/216383926-10a91b6e-005c-4e4d-8f55-edc2ac19f073.png)

The select option that is not content projected is working as expected but the content projected ones are not finding their parent listbox and therefore not behaving correctly.

Stackblitz for reference : https://stackblitz.com/edit/angular-ivy-tcfqrs?embed=1&file=src/app/select/select.component.ts

Contributor guide

Open the contributing guide

Research direction

Start with the linked StackBlitz reproduction and inspect how the Listbox CDK directive is resolved for projected versus non-projected options. Confirm the behavior for the custom select example, then verify that content-projected options find their parent Listbox and retain the expected accessibility and keyboard interactions.

Written by the indexing model from the issue text.

Assessment

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