Material: md-select-header inside md-tab not working

[aldesabido]

The problem occurs when I put the md-select inside the md-tabs then the md-select-header(search box) doesn't work anymore. Please see the fiddle below.

http://codepen.io/aldesabido/pen/GZGRBR

original link question
http://stackoverflow.com/questions/36707010/angular-material-md-select-header-inside-tab-not-working

Thanks!

[topherfangio]

I have altered your Codepen slightly to provide some debugging code: http://codepen.io/topherfangio/pen/reKjaj

Note the line that prints out the inputs variable; it is only showing the second input. I'm not sure why, but that code is not getting the first input, so it's not overriding the <md-select>'s default keydown logic.

That demo was merely an example of what is possible, so you may need to alter it a bit if you're changing where it is used.

[aldesabido]

@topherfangio

Got this working by providing ng-init in every md-select and call the function to instantiate keydown. Thanks btw.

[kavare]

Got a similar issue when trying to put md-select in md-chip-template.
@aldesabido what do you mean by

providing ng-init in every md-select and call the function to instantiate keydown ?

[kavare]

I think I got it, so basically put ng-keydown on search input and stop event from propagation there would do the trick.

For any other friends who is also blocked by this:
https://github.com/angular/material/issues/4239

[felipemangalo]

ng-keydown="$event.stopPropagation()"