md-select with a search input inside an md-tab

Question

I am having an issue when nesting an md-select with a search input inside an md-tab directive.

There are two problems:

1. Once the select box expands, one has to scroll up to view the search input
2. The search input does not actually accept any text

I made a codepen to illustrate better what I mean:

  <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 Angular-material 1.0.9

Thanks

Answer 1

I had the exact same problem and I managed to solve it by doing the follows

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

Then in my controller I defined an array of characters codes that should'nt be displayed in the search text

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

updateSearch function

  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

I also had this issue but solved it by following this solution. This is My HTML Code

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