feat(select): add mat-select-header component #7835

crisbeto · 2017-10-16T20:39:09Z

Adds a mat-select-header component, which is a fixed header above the select's options. It allows for the user to project an input to be used for filtering long lists of options.

This is a continuation of #3211 that polishes everything up, sorts out the a11y issues, fixes some animation issues and gets everything working with our current setup.

Note: This component only handles the positioning, styling, some basic focus management and exposes the panel id for a11y. The functionality is up to the consumer to handle.

Fixes #2812. Fixes #5697.

benb7760 · 2017-10-16T23:35:28Z

@crisbeto I am still seeing an issue I mentioned on previous PR;

On demo app, switch the select to multiple and chang currentDrink to string[]
Open select
Tick Coke, Coffee
Type 'tea' into header
Tick 'Tea'
Remove header filter
Observe that Coke, Coffee, are no longer selected

Happy to open this as a separate issue if it is not in scope for this PR

As a slight extension, the following is also true:

Set to multiple again
Tick Coke
Close select, observe placeholder 'Coke'
Open select and type 'aaaa'.
Observe that the Placeholder is now blank (this resolves itself once the filter is cleared)

szymexpawlowski · 2017-10-23T10:41:13Z

@crisbeto can we expect it in 2.0.0-beta.13?

jelbourn

Also update select.md? In particular I want to mention that the a11y is in the users hand with whatever they put in there.

jelbourn · 2017-10-23T22:27:53Z

src/lib/select/select.ts

@@ -638,6 +644,10 @@ export class MatSelect extends _MatSelectMixinBase implements AfterContentInit,
    if (this.panelOpen) {
      this._scrollTop = 0;
      this.onOpen.emit();
+
+      if (this.header) {
+        this.header._trapFocus();


Add explanation for what you're doing w/ the focus-trap here?

jelbourn · 2017-11-06T21:57:43Z

src/lib/select/select-header.html

@@ -0,0 +1,3 @@
+<span cdkTrapFocus>


Do we always want to focus trap here? What's your reasoning for adding it by default instead of letting the user add it?

I'd imagine that we do, just because the primary use case is having a search field. Also it removes a little bit of boilerplate for the consumer.

jelbourn · 2017-11-06T21:58:38Z

src/lib/select/select.ts

@@ -948,7 +958,7 @@ export class MatSelect extends _MatSelectMixinBase implements AfterContentInit,
        this.empty ? 0 : this._getOptionIndex(this._selectionModel.selected[0])!;

    selectedOptionOffset += MatOption.countGroupLabelsBeforeOption(selectedOptionOffset,
-        this.options, this.optionGroups);
+        this.options, this.optionGroups) + (this.header ? 1 : 0);


Add a comment?

Adds a `mat-select-header` component, which is a fixed header above the select's options. It allows for the user to project an input to be used for filtering long lists of options. **Note:** This component only handles the positioning, styling, some basic focus management and exposes the panel id for a11y. The functionality is up to the consumer to handle. Fixes angular#2812.

crisbeto · 2017-11-12T10:08:07Z

Rebased and addressed the feedback @jelbourn, can you take another look?

jrood

Revert fdescribe to describe so that pull request doesn't break Travis CI.

jrood · 2017-11-16T18:21:42Z

src/lib/select/select.spec.ts

@@ -56,7 +64,7 @@ const LETTER_KEY_DEBOUNCE_INTERVAL = 200;
 const platform = new Platform();


-describe('MatSelect', () => {
+fdescribe('MatSelect', () => {


It looks like there's a ban on fdescribe in tslint.json

Is there a way that I can make this change and resubmit? Or is it necessary to wait for @crisbeto to make the change?

I haven't addressed it yet because I'm waiting for some more feedback, @jrood.

jrood · 2017-11-30T17:16:20Z

@kara @amcdnl Thanks for the work you're doing on this project! Sorry to bother, but I'm trying to keep this pull request in motion, and I believe @crisbeto is waiting for more feedback. If you have a chance, please let him know if you have any.

jrood · 2017-12-06T17:22:33Z

@jelbourn does crisbeto's rebase, per your feedback, look good to you?

Maximaximum · 2017-12-16T20:27:08Z

This feature would be really handy, hoping for this to get into a release soon :)

Marcidius · 2017-12-19T14:23:51Z

This can be viewed as essential, in my opinion. Just yesterday I was assisting my team lead to try and make this happen in a custom component but we ran into some roadblocks. I sure hope this gets some further attention and gets assigned to a release sooner than later.

jrood · 2018-06-19T18:15:43Z

See also #11806 which addresses the a11y concerns via an overlay.

ngbot · 2018-06-29T16:39:27Z

Hi @crisbeto! This PR has merge conflicts due to recent upstream merges.
Please help to unblock it by resolving these conflicts. Thanks!

ngbot · 2018-07-11T15:10:24Z

Hi @crisbeto! This PR has merge conflicts due to recent upstream merges.
Please help to unblock it by resolving these conflicts. Thanks!

ngbot · 2018-07-11T15:11:44Z

Hi @crisbeto! This PR has merge conflicts due to recent upstream merges.
Please help to unblock it by resolving these conflicts. Thanks!

fxck · 2018-07-11T15:13:33Z

Even @ngbot is so desperate to have this merged in.

agiratech-vigneshm · 2018-08-25T07:36:54Z

When this will be merged, It's actually solving a very good problem.

kwkelly · 2018-08-28T19:22:15Z

Will this work with the new native select in #12707 , kind of like a datalist? I'm hoping for more native controls to improve the experience on mobile devices (especially some older ones that I have to deal with).

ruant · 2018-10-07T15:53:33Z

Will this make it before version 7 is out?...

mhosman · 2018-10-11T19:35:23Z

Any news about this???

mattiaskagstrom · 2018-10-12T12:26:51Z

have this been forgotten? looks like a merge conflict is all thats keeping i back?

ping @jrood @crisbeto @josephperrott

fxck · 2018-10-12T12:40:15Z

I think the person that was working on those accessibility things is not working in this team anymore.

mhosman · 2018-10-12T14:34:52Z

This is a must-have feature at least for any back-end

artparks · 2018-10-15T07:53:49Z

the underlying select API is being changed so this is presumably dead

liesahead · 2018-12-11T09:57:38Z

When this will become available?

kelvinlouis · 2018-12-21T13:21:35Z

I think it is dead :(

akvaliya · 2019-03-18T09:42:07Z

Any updates? Really disappointed that this important feature is still not exist.

shreeramk · 2019-05-19T14:17:50Z

Any update on this? Waiting desperately for this feature.

Splaktar · 2019-05-19T14:22:11Z

@shreeramk yes, you can find the update in #5697 (comment).

jelbourn · 2019-06-13T17:54:45Z

Closing this since we're going to work this feature into a larger revamp of the select rather than adding it to the current MatSelect implementation. We hope to have the new version available before the end of 2019.

crisbeto added the pr: needs review label Oct 16, 2017

crisbeto assigned jelbourn and kara Oct 16, 2017

crisbeto requested review from amcdnl, jelbourn and kara as code owners October 16, 2017 20:39

googlebot added the cla: yes PR author has agreed to Google's Contributor License Agreement label Oct 16, 2017

crisbeto force-pushed the 2812/select-header-strikes-back branch from 118b730 to 9a102e6 Compare October 16, 2017 20:40

crisbeto mentioned this pull request Oct 16, 2017

feat(select): add md-select-header directive #3211

Closed

crisbeto force-pushed the 2812/select-header-strikes-back branch from 9a102e6 to 1c41bfb Compare October 16, 2017 20:55

willshowell mentioned this pull request Oct 17, 2017

it's better to select has a search property for large amount of data #7853

Closed

crisbeto mentioned this pull request Oct 22, 2017

feat(select): Add select header to the md-select #2812

Closed

albyrock87 mentioned this pull request Oct 26, 2017

feat(select): add mat-select-header and mat-select-search component #8050

Closed

julianobrasil mentioned this pull request Oct 30, 2017

Feature request: search/filter in select #5697

Open

crisbeto mentioned this pull request Nov 4, 2017

Strange focus behaviour for dynamic matMenu content #7973

Closed

jelbourn reviewed Nov 6, 2017

View reviewed changes

crisbeto force-pushed the 2812/select-header-strikes-back branch from 1c41bfb to 2c3d45a Compare November 12, 2017 10:07

jrood suggested changes Nov 16, 2017

View reviewed changes

ksendart mentioned this pull request Dec 4, 2017

Replace current timezone selector bwsw/cloudstack-ui#683

Closed

jrood mentioned this pull request Dec 6, 2017

Autocomplete with multiple selection (MdAutocompleteTrigger customization) #5053

Open

chelaruc mentioned this pull request Dec 19, 2017

mat-select with search filter creativetimofficial/ct-material-dashboard-pro-angular#157

Closed

rosslavery mentioned this pull request Dec 21, 2017

[Autocomplete] Restrict selection to given set of items #3334

Closed

jrood mentioned this pull request Jun 19, 2018

fix(select): Improve the a11y of select component by making overlay #11806

Closed

josephperrott added pr: needs rebase target: minor This PR is targeted for the next minor release labels Jun 26, 2018

agiratech-vigneshm unassigned kara Aug 25, 2018

fxck mentioned this pull request Jan 29, 2019

Q1 2019 / 2019 plans #14992

Closed

mmalerba added aaa and removed aaa labels Apr 25, 2019

andrewseguin added the P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent label May 30, 2019

jelbourn closed this Jun 13, 2019

angular locked as resolved and limited conversation to collaborators Jun 13, 2019

feat(select): add mat-select-header component #7835

feat(select): add mat-select-header component #7835

Conversation

crisbeto commented Oct 16, 2017 • edited by Splaktar Loading

benb7760 commented Oct 16, 2017

szymexpawlowski commented Oct 23, 2017

jelbourn left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

crisbeto commented Nov 12, 2017

jrood left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jrood commented Nov 30, 2017

jrood commented Dec 6, 2017

Maximaximum commented Dec 16, 2017

Marcidius commented Dec 19, 2017

jrood commented Jun 19, 2018

ngbot bot commented Jun 29, 2018

ngbot bot commented Jul 11, 2018

ngbot bot commented Jul 11, 2018

fxck commented Jul 11, 2018

agiratech-vigneshm commented Aug 25, 2018

kwkelly commented Aug 28, 2018

ruant commented Oct 7, 2018

mhosman commented Oct 11, 2018

mattiaskagstrom commented Oct 12, 2018

fxck commented Oct 12, 2018

mhosman commented Oct 12, 2018

artparks commented Oct 15, 2018

liesahead commented Dec 11, 2018

kelvinlouis commented Dec 21, 2018

akvaliya commented Mar 18, 2019

shreeramk commented May 19, 2019

Splaktar commented May 19, 2019

jelbourn commented Jun 13, 2019

crisbeto commented Oct 16, 2017 •

edited by Splaktar

Loading