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

Fixes angular#6679

Closes angular#6701

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;