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

i having trouble regarding problem.

i using:

angular material 1.1.0
angular 1.5.5

the problem occurs when put md-select inside md-tabs md-select-header(search box) doesn't work anymore. not @ explaining things see codepen below.

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

it works when this.

<md-select multiple="">   <md-select-header>     <input type="search">   </md-select-header>   <md-optgroup label="vegetables">     <md-option></md-option>   </md-optgroup> </md-select> 

but not when this.

<md-tabs md-dynamic-height md-border-bottom> <md-tab label="vegetable tabs">     <md-subheader class="subheader">         <md-select multiple="">             <md-select-header>                 <input type="search">             </md-select-header>             <md-optgroup label="vegetables">                 <md-option></md-option>             </md-optgroup>         </md-select>     </md-subheader> </md-tab> 

please ask me if want info. thanks.

the reason because <input> element propagating keydown event md-select, md-select default pick menu item matched character.

by binding event handler input , stop event propagation trick.

// mdselecttemplate.html <div ng-controller="mdselectcontroller vm">     <md-select>       <md-input-container>         <input ng-model="vm.filterquery" ng-keydown="vm.onsearchchange($event)">       </md-input-container>       <md-option ng-repeat="item in vm.items track item.id" ng-value="item.id">     </md-select> </div>  // mdselectcontroller.js vm.filterquery = ''; vm.items = []; vm.onsearchchange = function(event) {   event.stoppropagation();   } 

kudos @dmaslov

and here's official thread https://github.com/angular/material/issues/4239