fix(input): prevent md-select-on-focus from refocusing blurred input (#…

…11129)

Eliminate race condition that causes a blurred input with md-select-on-focus from being re-selected.
When there are two inputs with md-select-on-focus this can result in an infinite loop where focus
moves back and forth between the two elements.

src/components/input/input.js

@@ -776,7 +776,7 @@ function placeholderDirective($compile) {
  *
  * </hljs>
  */
-function mdSelectOnFocusDirective($timeout) {
+function mdSelectOnFocusDirective($document, $timeout) {
 
   return {
     restrict: 'A',
@@ -802,9 +802,14 @@ function mdSelectOnFocusDirective($timeout) {
       preventMouseUp = true;
 
       $timeout(function() {
+
         // Use HTMLInputElement#select to fix firefox select issues.
         // The debounce is here for Edge's sake, otherwise the selection doesn't work.
-        element[0].select();
+        // Since focus may already have been lost on the input (and because `select()`
+        // will re-focus), make sure the element is still active before applying.
+        if($document[0].activeElement === element[0]) {
+          element[0].select();
+        }
 
         // This should be reset from inside the `focus`, because the event might
         // have originated from something different than a click, e.g. a keyboard event.

src/components/input/input.spec.js

@@ -659,6 +659,23 @@ describe('md-input-container directive', function() {
       }
     }));
 
+    it('should not refocus the input after focus is lost', inject(function($document, $timeout) {
+      var wrapper = $compile('<div><input md-select-on-focus value="Text"><input></div>')($rootScope),
+          input1 = angular.element(wrapper[0].childNodes[0]),
+          input2 = angular.element(wrapper[0].childNodes[1]);
+      $document[0].body.appendChild(wrapper[0]);
+
+      input1.focus();
+      input1.triggerHandler('focus');
+      input2.focus();
+      input2.triggerHandler('focus');
+
+      $timeout.flush();
+      expect(input2).toBeFocused();
+
+      wrapper.remove();
+    }));
+
     describe('Textarea auto-sizing', function() {
       var ngElement, element, ngTextarea, textarea, scope, parentElement;