Skip to content
This repository was archived by the owner on Sep 5, 2024. It is now read-only.
This repository was archived by the owner on Sep 5, 2024. It is now read-only.

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

@christrude

Description

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

Activity

ArchiMoebius

ArchiMoebius commented on Aug 30, 2016

@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

glepretre commented on Oct 3, 2016

@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

fanorenantsoa commented on Nov 25, 2016

@fanorenantsoa

thanks a lot! you saved me ;)

archcorsair

archcorsair commented on Jan 26, 2017

@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

maiara-sassi commented on Aug 10, 2017

@maiara-sassi

Obrigada @glepretre

added
needs: demoA CodePen demo or GitHub repository is needed to demonstrate the reproduction of the issue
on Feb 27, 2018
modified the milestones: - Backlog, Deprecated on Feb 27, 2018
Splaktar

Splaktar commented on Feb 27, 2018

@Splaktar
Contributor

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

glepretre commented on Feb 28, 2018

@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" 😉

26 remaining items

Loading
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

Relationships

None yet

Development

No branches or pull requests

Issue actions

    select: md-select-header input not usable, md-select keydown listener overrides search function · Issue #9321 · angular/material