search

angular / components

Component infrastructure and Material Design components for Angular
https://material.angular.io
MIT License
24.32k stars 6.72k forks source link

feat(Material Select) - Way to set first option active manually #21375

Open omkarshinge opened 3 years ago

omkarshinge commented 3 years ago

Way to set first option as active manually in Material Select

The feature to let first option active in the options displayed using material select. i.e. One should be able to manually/programmatically set the first option in the dropdown as active.

Use Case

While implementing search filter using Material Select component ( i.e. using an Input element within mat-select ) the active item toggles based on the default behaviour of keyboard interaction i.e. it sets the item active as per the matching character user has pressed on keyboard. This causes inconsistency while implementing custom filtering and may lead disturbance in the focus as per UX perspective.

The feature for manually setting the first option active can help resolve the above scenario.

Tried using this.matSelect._keyManager.setFirstItemActive(); (matSelect is of type Material Select) but the default search behaviour causes inconsistency and sometimes option other than the first option gets active

Sample demo for Drop Down Search using Material Select : https://stackblitz.com/edit/angular-ivy-q1bvhb

bdebon commented 2 years ago

Hey @omkarshinge, I had the same problem and your suggestion helped me to sort it out. You were almost there! If you use this.select._keyManager.setActiveItem(0) you will manage what you are trying to do. So thank you for putting me on the way, I did not about keyManager, and I hope that my solution will help.

Have a good day!

angular-robot[bot] commented 2 years ago

Just a heads up that we kicked off a community voting process for your feature request. There are 20 days until the voting process ends.

Find more details about Angular's feature request process in our documentation.

angular-robot[bot] commented 2 years ago

Thank you for submitting your feature request! Looks like during the polling process it didn't collect a sufficient number of votes to move to the next stage.

We want to keep Angular rich and ergonomic and at the same time be mindful about its scope and learning journey. If you think your request could live outside Angular's scope, we'd encourage you to collaborate with the community on publishing it as an open source package.

You can find more details about the feature request process in our documentation.