fix(select): md-select-header closes on mouse click when not using multiple

- if the click event came from within a `md-select-header`, `stopImmediatePropagation()`
  to keep the menu from closing
- fix demo's input being too short to display label when 'Kale' is selected
- rename some events and add types
- update select header input's placeholder and add an aria-label

Fixes #11969

Author: Splaktar

src/components/select/demoBasicUsage/style.css

@@ -1,3 +1,3 @@
 md-input-container {
-    margin-right: 10px;
+  margin-right: 10px;
 }

src/components/select/demoSelectHeader/index.html

@@ -6,17 +6,17 @@ <h1 class="md-title">Pick a vegetable below</h1>
         <label>Vegetables</label>
         <md-select ng-model="selectedVegetables"
                    md-on-close="clearSearchTerm()"
-                   data-md-container-class="selectdemoSelectHeader"
+                   md-container-class="selectdemoSelectHeader"
                    multiple>
           <md-select-header class="demo-select-header">
-            <input ng-model="searchTerm"
-                   type="search"
-                   placeholder="Search for a vegetable.."
+            <input ng-model="searchTerm" aria-label="Vegetable filter"
+                   type="search" placeholder="Ex. Onions"
                    class="demo-header-searchbox md-text">
           </md-select-header>
           <md-optgroup label="vegetables">
-            <md-option ng-value="vegetable" ng-repeat="vegetable in vegetables |
-              filter:searchTerm">{{vegetable}}</md-option>
+            <md-option ng-value="vegetable" ng-repeat="vegetable in vegetables | filter:searchTerm">
+              {{vegetable}}
+            </md-option>
           </md-optgroup>
         </md-select>
       </md-input-container>

src/components/select/demoSelectHeader/script.js

@@ -1,14 +1,16 @@
-angular
-    .module('selectDemoSelectHeader', ['ngMaterial'])
-    .controller('SelectHeaderController', 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();
-      });
+(function () {
+  'use strict';
+  angular.module('selectDemoSelectHeader', ['ngMaterial'])
+  .controller('SelectHeaderController', 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();
     });
+  });
+})();

src/components/select/demoSelectHeader/style.css

@@ -1,25 +1,24 @@
 /* Please note: All these selectors are only applied to children of elements with the 'selectdemoSelectHeader' class */
-
 .demo-header-searchbox {
   border: none;
   outline: none;
   height: 100%;
   width: 100%;
   padding: 0;
 }
-
 .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;
+  padding-left: 16px;
   height: 48px;
   cursor: pointer;
   position: relative;
   display: flex;
-  align-items: center;
   width: auto;
 }
-
 md-content._md {
   max-height: 240px;
 }
+md-input-container {
+  min-width: 112px;
+}

src/components/select/select.js

@@ -688,19 +688,33 @@ function SelectMenuDirective($parse, $mdUtil, $mdConstant, $mdTheming) {
     element.on('click', clickListener);
     element.on('keypress', keyListener);
 
-    function keyListener(e) {
-      if (e.keyCode === 13 || e.keyCode === 32) {
-        clickListener(e);
+    /**
+     * @param {KeyboardEvent} keyboardEvent
+     */
+    function keyListener(keyboardEvent) {
+      if (keyboardEvent.keyCode === 13 || keyboardEvent.keyCode === 32) {
+        clickListener(keyboardEvent);
       }
     }
 
-    function clickListener(ev) {
-      var option = $mdUtil.getClosest(ev.target, 'md-option');
+    /**
+     * @param {Event} mouseEvent
+     * @return {void}
+     */
+    function clickListener(mouseEvent) {
+      var option = $mdUtil.getClosest(mouseEvent.target, 'md-option');
       var optionCtrl = option && angular.element(option).data('$mdOptionController');
-      if (!option || !optionCtrl) return;
-      if (option.hasAttribute('disabled')) {
-        ev.stopImmediatePropagation();
-        return false;
+
+      if (!option || !optionCtrl) {
+        // Avoid closing the menu when the select header's input is clicked
+        if (mouseEvent.target && mouseEvent.target.parentNode &&
+          mouseEvent.target.parentNode.tagName === 'MD-SELECT-HEADER') {
+          mouseEvent.stopImmediatePropagation();
+        }
+        return;
+      } else if (option.hasAttribute('disabled')) {
+        mouseEvent.stopImmediatePropagation();
+        return;
       }
 
       var optionHashKey = selectMenuCtrl.hashGetter(optionCtrl.value);