select: md-select-header input not usable, md-select keydown listener overrides search function

[christrude]

The demo shows to inject $element into the controller and add the following line to your controller:

$element.find('input').on('keydown', function(ev) {
    ev.stopPropagation();
});

However, it is not allowed to inject the $element into a controller, and is improper to do so, and it throws this error:

Error: [$injector:unpr] Unknown provider: $elementProvider <- $element <- SandboxCtrl

All places I've attempted this are within an md-dialog. Without being able to get the md-select keypress listener turned off, I can't get search for select working. Is there some other workaround for this? I cannot get the demo to work on my app, but on codepen it appears to work OK.

Here's my implementation (HTML):

<md-input-container>
    <label>Select or specify {{provision.provisionDestination.destinationType}} connection</label>
    <md-select id="destinationConnections" name="destinationConnections" required ng-model="sandboxConnection" ng-disabled="provision.provisionDestination.destinationType == '' || isViewMode" md-on-open="loadDestinationByType();" md-on-close="setDest(sandboxConnection)" data-md-container-class="selectSelectHeader">
          <md-select-header class="select-header">
               <input ng-model="destSearchTerm"
                       type="search"
                       placeholder="Pick an Existing Destination"
                       class="select-header-searchbox _md-text">
         </md-select-header>
         <md-optgroup label="Existing Destinations">
             <md-option class="destination-connection-option new-connection" ng-value="'0'" ng-click="loadDestinationFieldValues('0')">Specify a Connection</md-option>
             <md-option class="destination-connection-option" ng-repeat="extDest in existingDestination | toArray:false | filter:destSearchTerm" ng-value=" extDest.destinationTitle" ng-click="loadDestinationFieldValues(extDest)">
                               {{extDest.destinationTitle}}
            </md-option>
        </md-optgroup>
    </md-select>
</md-input-container>

[ArchiMoebius]

You can always use Vanilla JS as a workaround:

window.mdSelectOnKeyDownOverride = function(event) {
    event.stopPropagation();
    // NOTE: hack until this is fixed...
};
...
...
...
  <input 
      ng-model="destSearchTerm"
      onkeydown="mdSelectOnKeyDownOverride(event)"
      type="search"
      placeholder="Pick an Existing Destination"
      class="select-header-searchbox _md-text"
  />
...
...
...

[glepretre]

In our opinion it could be handled internally but here's what we did:

<!--https://github.com/angular/material/issues/9321-->
<input ng-model="destSearchTerm"
       ng-keydown="$event.stopPropagation()"
       type="search"
       placeholder="Pick an Existing Destination"
       class="select-header-searchbox _md-text"/>

Based on @poerhiza idea, we just use angular built-in ng-keydown.

[fanorenantsoa]

thanks a lot! you saved me ;)

[archcorsair]

I'm having a similar issue, although $event.stopPropagation() allows me to input text into the input field, it prevents my ng-keyup event from propagating. I've tried an alternative override where I pass the $event through and decide if I want to stop propagation or not but without $event.stopPropagation() I'm unable to even type in the input field.

My code looks like this:

                                <md-input-container>
                                  <div class='filter-dropdown' layout='row'>
                                    <label>Device Id</label>
                                    <md-select ng-model="item.deviceManual"
                                               data-md-container-class='searchItemsSelectHeader'>
                                      <md-select-header class="device-select-header">
                                        <form>
                                          <input ng-model="searchTerm.deviceManual"
                                                 ng-keyup='$event.keyCode == 13 && deviceIdSubmit($event)'
                                                 ng-keydown='$event.stopPropagation($event)'
                                                 type="text"
                                                 placeholder="Add An Id"
                                                 class="header-searchbox md-text">
                                        </form>
                                      </md-select-header>
                                      <md-optgroup label='items'>
                                        <md-option ng-value="item"
                                                   ng-repeat="item in items | filter:searchTerm.device">{{item}}
                                        </md-option>
                                      </md-optgroup>
                                    </md-select>
                                  </div>
                                </md-input-container>

[maiara-sassi]

Obrigada @glepretre

[Splaktar]

I'm going to close this as there appear to be workarounds and the issue template wasn't completed (no AngularJS Material version indicated and no CodePen reproduction/demo). If this is still an issue for you, please open a new issue with all of the required information so that we can debug and resolve it effectively.

[glepretre]

Hi @Splaktar,

As stated in @christrude first message, the issue appears on the demo page:
https://material.angularjs.org/1.1.7/demo/select#select-header

Here's a forked CodePen, just commenting out the stopPropagation() :
➡️ https://codepen.io/anon/pen/BYveYr ⬅️

The demo explains:

      // The md-select directive eats keydown events for some quick select
      // logic. Since we have a search input here, we don't need that logic.

But this is still astonishing to have to copy/paste these lines in our own code to make the md-select search input working "as expected" 😉