md-select z wejściem wyszukiwania wewnątrz karty md

Question

Występuje problem podczas zagnieżdżania md-select z danymi wejściowymi wyszukiwania w dyrektywie md-tab.

Istnieją dwa problemy:

1. Po polu Wybierz rozszerza, trzeba przewijać w górę, aby zobaczyć wejście wyszukiwania
2. Wejście wyszukiwania nie faktycznie przyjąć dowolny tekst

I utworzono codepen, aby lepiej zilustrować:

<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> 

angularjs 1.5.3 kątowa-materialny 1.0.9

Dzięki

Answer 1

miałem dokładnie ten sam problem i udało mi się go rozwiązać, wykonując następujące

<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> 

a potem w moim kontroler i zdefiniowano tablicę znaków, kodów, które should'nt być wyświetlany w tekście wyszukiwania

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]; 

i moja funkcja updateSearch wygląda następująco

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

Też miałem ten problem, ale rozwiązałem go, stosując to rozwiązanie. To jest mój kod 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>