fix(select): use KeyboardEvent.key instead of KeyboardEvent.keyCode for auto-completion

src/components/select/select.js

@@ -735,10 +735,7 @@ function SelectMenuDirective($parse, $mdUtil, $mdConstant, $mdTheming) {
         optNodes = undefined;
       }, CLEAR_SEARCH_AFTER);
 
-      // Support 1-9 on numpad
-      var keyCode = e.keyCode - ($mdConstant.isNumPadKey(e) ? 48 : 0);
-
-      searchStr += String.fromCharCode(keyCode);
+      searchStr += e.key;
       var search = new RegExp('^' + searchStr, 'i');
       if (!optNodes) {
         optNodes = $element.find('md-option');

src/components/select/select.spec.js

@@ -213,7 +213,7 @@ describe('<md-select>', function() {
       $document[0].body.appendChild(select[0]);
 
       var selectMenu = $document.find('md-select-menu');
-      pressKey(selectMenu, 27);
+      pressKeyByCode(selectMenu, 27);
       $material.flushInterimElement();
 
       // FIXME- does not work with minified, jquery
@@ -1312,54 +1312,66 @@ describe('<md-select>', function() {
     describe('md-select', function() {
       it('can be opened with a space key', function() {
         var el = setupSelect('ng-model="someModel"', [1, 2, 3]).find('md-select');
-        pressKey(el, 32);
+        pressKeyByCode(el, 32);
         $material.flushInterimElement();
         expectSelectOpen(el);
       });
 
       it('can be opened with an enter key', function() {
         var el = setupSelect('ng-model="someModel"', [1, 2, 3]).find('md-select');
-        pressKey(el, 13);
+        pressKeyByCode(el, 13);
         $material.flushInterimElement();
         expectSelectOpen(el);
       });
 
       it('can be opened with the up key', function() {
         var el = setupSelect('ng-model="someModel"', [1, 2, 3]).find('md-select');
-        pressKey(el, 38);
+        pressKeyByCode(el, 38);
         $material.flushInterimElement();
         expectSelectOpen(el);
       });
 
       it('can be opened with the down key', function() {
         var el = setupSelect('ng-model="someModel"', [1, 2, 3]).find('md-select');
-        pressKey(el, 40);
+        pressKeyByCode(el, 40);
         $material.flushInterimElement();
         expectSelectOpen(el);
       });
 
       it('supports typing an option name', function() {
         var el = setupSelect('ng-model="someModel"', [1, 2, 3]).find('md-select');
-        pressKey(el, 50);
+        pressKey(el, '2');
         expect($rootScope.someModel).toBe(2);
       });
 
       it('supports typing non-english option names', inject(function($document, $rootScope) {
         var words = ['algebra', 'álgebra'];
         var el = setupSelect('ng-model="someModel"', words).find('md-select');
 
-        pressKey(el, words[1].charCodeAt(0));
+        pressKey(el, words[1][0]);
         expect($rootScope.someModel).toBe(words[1]);
       }));
 
       it('supports typing unicode option names', inject(function($document, $rootScope) {
         var words = ['algebra', '太阳'];
         var el = setupSelect('ng-model="someModel"', words).find('md-select');
 
-        pressKey(el, words[1].charCodeAt(0));
+        pressKey(el, words[1][0]);
         expect($rootScope.someModel).toBe(words[1]);
       }));
 
+      it('supports typing dots and commas', inject(function($document, $rootScope) {
+        var words = ['a.b.c', 'a.b,d', 'a.b,c'];
+        var el = setupSelect('ng-model="someModel"', words).find('md-select');
+
+        pressKey(el, 'a');
+        pressKey(el, '.');
+        pressKey(el, 'b');
+        pressKey(el, ',');
+        pressKey(el, 'c');
+        expect($rootScope.someModel).toBe(words[2]);
+      }));
+
       // Note, this test is designed to check the shouldHandleKey() method which is the default
       // method if the keypress doesn't match one of the KNOWN keys such as up/down/enter/escape/etc.
       it('does not swallow useful keys (fn, arrow, etc)', function() {
@@ -1374,7 +1386,7 @@ describe('<md-select>', function() {
 
         keyCodes.forEach(function(code) {
           customEvent.keyCode = code;
-          pressKey(el, null, customEvent);
+          pressKeyByCode(el, null, customEvent);
           expect(customEvent.preventDefault).not.toHaveBeenCalled();
         });
       });
@@ -1390,13 +1402,13 @@ describe('<md-select>', function() {
 
         customEvent.keyCode = 70;
         customEvent.ctrlKey = true;
-        pressKey(el, null, customEvent);
+        pressKeyByCode(el, null, customEvent);
         expect(customEvent.preventDefault).not.toHaveBeenCalled();
 
         customEvent.keyCode = 82;
         customEvent.ctrlKey = false;
         customEvent.metaKey = true;
-        pressKey(el, null, customEvent);
+        pressKeyByCode(el, null, customEvent);
         expect(customEvent.preventDefault).not.toHaveBeenCalled();
       });
 
@@ -1406,7 +1418,7 @@ describe('<md-select>', function() {
           '<md-option value="2" ng-disabled="true">2</md-option>';
         var el = setupSelect('ng-model="someModel"', optsTemplate).find('md-select');
 
-        pressKey(el, 50);
+        pressKeyByCode(el, 50);
         expect($rootScope.someModel).toBe(undefined);
       });
     });
@@ -1418,7 +1430,7 @@ describe('<md-select>', function() {
         expectSelectOpen(el);
         var selectMenu = $document.find('md-select-menu');
         expect(selectMenu.length).toBe(1);
-        pressKey(selectMenu, 27);
+        pressKeyByCode(selectMenu, 27);
         $material.flushInterimElement();
         expectSelectClosed(el);
       });
@@ -1493,7 +1505,7 @@ describe('<md-select>', function() {
   }
 
 
-  function pressKey(el, code, customEvent) {
+  function pressKeyByCode(el, code, customEvent) {
     var event = customEvent || {
       type: 'keydown',
       keyCode: code
@@ -1502,6 +1514,15 @@ describe('<md-select>', function() {
     el.triggerHandler(event);
   }
 
+  function pressKey(el, key, customEvent) {
+    var event = customEvent || {
+      type: 'keydown',
+      key: key
+    };
+
+    el.triggerHandler(event);
+  }
+
   function clickOption(select, index) {
     expectSelectOpen(select);