Angular material md-select-header issue

Question

i have below code

<md-select class="" name="partners" ng-model="obj.con" data-md-container-class="selectdemoSelectHeader"
ng-disabled="notEditable('partners')">
    <md-select-header class="demo-select-header">
        <input ng-model="mdSelectHeader.searchTerm1" type="search" placeholder="{{'SEARCH' | T}}" class="demo-header-searchbox md-text">
    </md-select-header>
    <md-option ng-repeat="z in _.find(partnerContactList, { 'id': obj.par*1 }).contacts | filter:mdSelectHeader.searchTerm1" value="{{z.name}}">{{z.name}} ({{z.phone}},{{z.email}})</md-option>
</md-select>

I have no idea why the unable to type anything.

Another code in the same page could work if the control is rendered dynamically.

For example, if i use ng-if or ng-repeat to render the control dynamically, the input field cannot type anything, otherwise, it could work.

Anyone has fix on it?

Thanks.

Answer 1

I believe this is a known issue with angular material library. However, there'a also a workaround in this discussion by using $event.stopPropagation() with angular built-in keydown.

<md-select class="" name="partners" ng-model="obj.con" data-md-container-class="selectdemoSelectHeader"
ng-disabled="notEditable('partners')">
    <md-select-header class="demo-select-header">
        <input ng-model="mdSelectHeader.searchTerm1" type="search" placeholder="{{'SEARCH' | T}}" class="demo-header-searchbox md-text" ng-keydown="$event.stopPropagation()">
    </md-select-header>
    <md-option ng-repeat="z in _.find(partnerContactList, { 'id': obj.par*1 }).contacts | filter:mdSelectHeader.searchTerm1" value="{{z.name}}">{{z.name}} ({{z.phone}},{{z.email}})</md-option>
</md-select>

Here's a working sample