feat(MAT-SELECT): Create a "header area" inside the panel before mat-mdc-select-panel

[GLugano]

Feature Description

Add a ng-content with select, with or without wrapper, that enable the possibility to add any content before the scrollable div inside the panel.

I dont have idea if it needs any default/configured height or if it is just based on the content height.

Possible implementation (right before the div with role="listbox"): <ng-content select="mat-select-panel-header, [matSelectPanelHeader]"></ng-content>

Use Case

While using mat-select, sometimes its needed to use a input to filter the options when dealing with many options.

The "current" way to do it, we need a third party component (Ex: ngx-mat-select-search, that fix the problem with filtering and desselecting values because the option doesnt exist anymore) and it works.

There is 2 problems with this: its not native (we need to "fix" the selection problem) and the scroll.

The scroll problem is this: when you are navigating with the keyboard, the moment the first option is not visible anymore and try to go back to it, the code consider the option positioned behind the "search option" as a valid position. The result is that the option is focused but not visible and clicking to go up doesnt change anything.

This happens because there is no "right place" to put that input and we are forced to put it with the other options.

The "real" solution is a native search, but we will not get any of it, i know. Creating a simple directive and adding a ng-content with select would fix the problems and will enable us to use the third party component.

We need the search option because its hard to find a single options between 300 other options.

[MikaStark]

You probably need a mat-autocomplete

[crisbeto]

Should be covered by https://github.com/angular/components/issues/5697.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}