CODEWITHSUNDEEP
javascriptcssangularjsangular-material
aldesabido
aldesabido

Reputation: 1288

Angular Material: md-select-header inside tab not working

I am having a trouble regarding this problem.

I am using:

Angular Material 1.1.0
Angular 1.5.5

The problem occurs when I put the md-select inside the md-tabs then the md-select-header(search box) doesn't work anymore. I am not really good at explaining things so just see the codepen below.

http://codepen.io/aldesabido/pen/GZGRBR

It works when I do this.

<md-select multiple="">
  <md-select-header>
    <input type="search">
  </md-select-header>
  <md-optgroup label="vegetables">
    <md-option></md-option>
  </md-optgroup>
</md-select>

but not when I do this.

<md-tabs md-dynamic-height md-border-bottom>
<md-tab label="Vegetable Tabs">
    <md-subheader class="subheader">
        <md-select multiple="">
            <md-select-header>
                <input type="search">
            </md-select-header>
            <md-optgroup label="vegetables">
                <md-option></md-option>
            </md-optgroup>
        </md-select>
    </md-subheader>
</md-tab>

Please ask me if you want another info. Thanks.

Upvotes: 1

Views: 2020

Answers (2)

ARUN G
ARUN G

Reputation: 26

add ng-keydown="$event.stopPropagation()"

refer this example 

<html lang="en" >
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- Angular Material style sheet -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.9/angular-material.min.css">

  <style>
    .selectdemoSelectHeader .demo-header-searchbox {
      border: none;
      outline: none;
      height: 100%;
      width: 100%;
      padding: 0;
    }
    .selectdemoSelectHeader .demo-select-header {
      box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.1), 0 0 0 0 rgba(0, 0, 0, 0.14), 0 0 0 0 rgba(0, 0, 0, 0.12);
      padding-left: 10.667px;
      height: 48px;
      cursor: pointer;
      position: relative;
      display: flex;
      align-items: center;
      width: auto;
    }
    .selectdemoSelectHeader md-content._md {
      max-height: 240px;
    }
  </style>
</head>
<body ng-app="Vegetables" ng-cloak>
  <div ng-controller="vegetables">
    <md-tabs>
      <md-tab label="Plase Search ">
        <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" ng-keydown="$event.stopPropagation()">
            </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>
    </md-tabs>
  </div>

  <!-- Angular Material requires Angular.js Libraries -->
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-aria.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-messages.min.js"></script>

  <!-- Angular Material Library -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.9/angular-material.min.js"></script>

  <!-- Your application bootstrap  -->
  <script type="text/javascript">
    /**
     * You must include the dependency on 'ngMaterial'
     */
    angular
      .module('Vegetables', ['ngMaterial'])
      .controller('vegetables', function($scope, $element) {
        $scope.vegetables = [
          'Corn',
          'Onions',
          'Kale',
          'Arugula',
          'Peas',
          'Zucchini'
        ];

        $scope.searchTerm;

        $scope.clearSearchTerm = function() {
          $scope.searchTerm = '';
        };

        // 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.
        $element.find('input').on('keydown', function(ev) {
          ev.stopPropagation();
        });
      });
  </script>
</body>
</html>

Upvotes: 1

kavare
kavare

Reputation: 1806

The reason for this is because <input> element is propagating keydown event up to md-select, where md-select by default will pick up the menu item which matched the character.

By binding an event handler to input and stop event propagation would do the trick.

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

// MdSelectController.js
vm.filterQuery = '';
vm.items = [];
vm.onSearchChange = function(event) {
  event.stopPropagation();  
}

Kudos to @dmaslov

And here's the official thread https://github.com/angular/material/issues/4239

Upvotes: 1

Related Questions