Components: feat(select): Add select header to the md-select

[Eernie]

Bug, feature request, or proposal:

Feature request

Yesterday I filled a pull request ( #2797 ) for adding a search bar in the md-select component. As @jelbourn pointed out this wasn't the right way to add this feature, so now I'm willing to do it the right way.
What's the best way to address this? Just implement the same functionality as material does it?

That will mean something like this is possible:

<md-select placeholder="Favorite food">
    <md-select-header>
        <input [ngModel]="searchTerm" type="search" placeholder="Search for a vegetable..">
    </md-select-header>   
        <md-option *ngFor="let food of foods | filter " [value]="food.value">
            {{ food.viewValue }}
        </md-option>
</md-select>

[jelbourn]

The idea is pretty much the same as the AngularJS version. One of the things holding us back from working on this has been that we're not sure what the appropriate accessibility story for this feature is. The most common use case the the select header is a filter input, but the standard role="listbox" doesn't have anything like a associated filter. Adding it would require some research as to whether there is something we can do to make this interaction work for screen-reader users.

As far as API and implementation details go, @kara will likely have some input.

[Eernie]

Is it possible that I port the AngularJS version for now and add the whole role="listbox" part later when this is clear?

[fxck]

@Eernie go for it

[esinek]

@Eernie, FYI, another use case of md-select-header is a check all / uncheck all (button(s) or tri-state checkbox) if the options are multi-select.
Would be great if there were also a md-select-footer. For selects with a large number of options, md-select-footer could contain the paging controls (links/buttons to first, prev, next, last).

[exequiel09]

What's the status of this? Is this merged or not?

[JasonAHeron]

I was wondering if there was any progress on this?

[crisbeto]

@JasonAHeron the related PR (#3211) was blocked for a while until we decide how to handle the accessibility of the header. It should be unblocked once https://github.com/angular/material2/pull/6856 gets in.

[doronsever]

Any news on this issue?
It looks like #6856 was merged

[crisbeto]

There's a pending pull request at https://github.com/angular/material2/pull/7835.

[andplusblaw]

Hi I was wondering if 'mat-select-header' is available yet?

[jrood]

@andplusblaw unfortunately not yet. Please leave feedback at https://github.com/angular/material2/pull/7835 if you have any.

[ghost]

when can we expect this feature to be work ?

[andplusblaw]

@jrood thank you

[liesahead]

Still no? More than 1 year passed

[irowbin]

Any progress on this one?

[sainisagar310]

+1

[vehansayvazi]

+1

[jelbourn]

Closing as a duplicate of #5697 because that one has more votes (even though this one is older)

[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._}