md-select con un input di ricerca all'interno di un md-tab

Question

Sto riscontrando un problema durante l'annidamento di md-select con un input di ricerca all'interno di una direttiva md-tab.

ci sono due problemi:

1. Una volta che la casella di selezione si espande, si deve scorrere verso l'alto per vedere l'ingresso di ricerca
2. L'ingresso di ricerca in realtà non accetta qualsiasi testo

I Fatto un codepen illustrare meglio quello che voglio dire:

<md-tab label="Search does not work here"> 
    <md-input-container class="md-block" flex> 
     <label>Vegetables</label> 
     <md-select 
     multiple 
     ng-model="selectedVegetables" 
     md-on-close="clearSearchTerm()" 
     data-md-container-class="selectdemoSelectHeader"> 
     <md-select-header class="demo-select-header"> 
      <input 
      type="search" 
      ng-model="searchTerm" 
      placeholder="Search.." 
      class="demo-header-searchbox md-text"> 
     </md-select-header> 
     <md-optgroup label="vegetables"> 
      <md-option 
      ng-value="vegetable" 
      ng-repeat="vegetable in vegetables | filter:searchTerm"> 
       {{vegetable}} 
      </md-option> 
     </md-optgroup> 
     </md-select> 
    </md-input-container> 
    </md-tab> 

Angular.js 1.5.3 angolare materiale 1.0.9

Grazie

Answer 1

ho avuto lo stesso identico problema e sono riuscito a risolverlo facendo quanto segue

<md-select-header class="demo-select-header"> 
<input 
ng-model="formData.searchTerm" 
type="search" 
placeholder="Search for a student.." 
aria-label 
class="demo-header-searchbox _md-text" 
ng-keydown="vm.updateSearch($event)" 
> 
</md-select-header> 

e poi nella mia Controller ho definito una serie di codici di caratteri che should'nt essere visualizzato nel testo di ricerca

vm.bannedCodes = [ 8,9,13,16,17,18,19,20,27,33,34,35,36,37,38,39,40,45,46,91,92,,106,107,109,110,111,112,113,114,115,116,117,118,119,120,121,121,123,144,145]; 

e la mia funzione updateSearch sembra che questo

function updateSearch(e){ 
    e.stopPropagation(); 
    if(vm.bannedCodes.indexOf(e.keyCode) < 0){ 
    if(e.keyCode == 8){ 
     $scope.formData.searchTerm =  $scope.formData.searchTerm.substring(1 , $scope.formData.searchTerm.length -1); 
    } 
    } 

} 

Answer 2

Ho anche avuto questo problema, ma risolto seguendo questa soluzione. Questo è il mio codice HTML

<md-input-container> 
    <label></label> 
    <md-select ng-model="selectedVegetables"> 
     <md-select-header> 
      <input ng-model="searchTerm" class="_md-text" onkeydown="mdSelectOnKeyDownOverride(event)"> 
    </md-select-header> 
    <md-optgroup> 
     <md-option></md-option> 
    </md-optgroup> 
    </md-select> 
</md-input-container>