Material: <md-select> add setting to stop handle keydown event

Created on 19 Aug 2015 · 7Comments · Source: angular/material

Hi!
Is it possible to add a setting to <md-select> directive to stop handle keydown event?

The issue is that I have a select with search input to filter option items. When I press a button, input loses focus and cursor moves to matched option in the list.
I want to prevent that behavior.
Or maybe there is more elegant way to do what I want?
Thanks in advance!

My code:

<md-select multiple ng-model="selectedItems">
  <md-input-container>
    <input type="text" ng-model="search">
  </md-input-container>
  <md-option ng-repeat="item in items | filter:search" ng-value="item.id">{{ item.value }}</md-option>
</md-select>

Source

dmaslov

Most helpful comment

@holly-weisser

Yes.
The main thing is ng-keydown with stopPropagation in handler.
Let me know if you need the full implementation (i am using custom wrapper over Angular and i need to convert my code to common view to make it understandable)

<md-select>
  <md-input-container>
    <input ng-model="controller.filterQuery" ng-keydown="controller.onSearchChange($event)">
  </md-input-container>
  <md-option ng-repeat="item in controller.items track by item.id" ng-value="item.id">
</md-select>

controller.onSearchChange = function($event) {
  $event.stopPropagation();
  // Here you could use default Angular filter service, or use your own implementation of filter function
  this.items = functionToFilterItemsByQuery(this.filterQuery);
}

dmaslov on 4 Sep 2015

❤3 👍3

All 7 comments

@dmaslov -- Did you find a way to handle this? I'm running in to the same issue.

holly-weisser on 3 Sep 2015

@holly-weisser

<md-select>
  <md-input-container>
    <input ng-model="controller.filterQuery" ng-keydown="controller.onSearchChange($event)">
  </md-input-container>
  <md-option ng-repeat="item in controller.items track by item.id" ng-value="item.id">
</md-select>

controller.onSearchChange = function($event) {
  $event.stopPropagation();
  // Here you could use default Angular filter service, or use your own implementation of filter function
  this.items = functionToFilterItemsByQuery(this.filterQuery);
}

dmaslov on 4 Sep 2015

❤3 👍3

Awesome, thank you!

holly-weisser on 4 Sep 2015

hello. i have tried adding $event.stopPropagation(); but still it does not stops the keydown event in the md-select. you have idea on this?

hsiri on 4 Apr 2016

@hsiri I faced the same issue as you just a couple of hours before where I made a silly mistake.
I guess you might also put ng-keydown directive at the wrong element?
It should be on <input>, not on <md-select> itself. 😛