feat(input): add directive to auto select text on input focus

Fixes #6679

Closes #6701

Author: devversion

src/components/input/demoBasicUsage/index.html

@@ -83,7 +83,7 @@
 
         <md-input-container class="md-block">
           <label>Biography</label>
-          <textarea ng-model="user.biography" columns="1" md-maxlength="150" rows="5"></textarea>
+          <textarea ng-model="user.biography" md-maxlength="150" rows="5" md-select-on-focus></textarea>
         </md-input-container>
 
 

src/components/input/input.js

@@ -15,6 +15,7 @@ angular.module('material.components.input', [
   .directive('ngMessages', ngMessagesDirective)
   .directive('ngMessage', ngMessageDirective)
   .directive('ngMessageExp', ngMessageDirective)
+  .directive('mdSelectOnFocus', mdSelectOnFocusDirective)
 
   .animation('.md-input-invalid', mdInputInvalidMessagesAnimation)
   .animation('.md-input-messages-animation', ngMessagesAnimation)
@@ -572,6 +573,29 @@ function placeholderDirective($log) {
   }
 }
 
+function mdSelectOnFocusDirective() {
+
+  return {
+    restrict: 'A',
+    link: postLink
+  };
+
+  function postLink(scope, element, attr) {
+    if (element[0].nodeName !== 'INPUT' && element[0].nodeName !== "TEXTAREA") return;
+
+    element.on('focus', onFocus);
+
+    scope.$on('$destroy', function() {
+      element.off('focus', onFocus);
+    });
+
+    function onFocus() {
+      // Use HTMLInputElement#select to fix firefox select issues
+      element[0].select();
+    }
+  }
+}
+
 var visibilityDirectives = ['ngIf', 'ngShow', 'ngHide', 'ngSwitchWhen', 'ngSwitchDefault'];
 function ngMessagesDirective() {
   return {

src/components/input/input.spec.js

@@ -402,6 +402,26 @@ describe('md-input-container directive', function() {
     expect(el[0].querySelector("[ng-messages]").classList.contains('md-auto-hide')).toBe(false);
   }));
 
+  it('should select the input value on focus', inject(function() {
+    var container = setup('md-select-on-focus');
+    var input = container.find('input');
+    input.val('Auto Text Select');
+
+    document.body.appendChild(container[0]);
+
+    expect(isTextSelected(input[0])).toBe(false);
+
+    input.triggerHandler('focus');
+
+    expect(isTextSelected(input[0])).toBe(true);
+
+    document.body.removeChild(container[0]);
+
+    function isTextSelected(input) {
+      return input.selectionStart == 0 && input.selectionEnd == input.value.length
+    }
+  }));
+
   describe('Textarea auto-sizing', function() {
     var ngElement, element, ngTextarea, textarea, scope, parentElement;