diff --git a/src/components/input/demoBasicUsage/index.html b/src/components/input/demoBasicUsage/index.html index 2df0a483d6d..f8b8ea587de 100644 --- a/src/components/input/demoBasicUsage/index.html +++ b/src/components/input/demoBasicUsage/index.html @@ -83,7 +83,7 @@ - + diff --git a/src/components/input/input.js b/src/components/input/input.js index c23e533873e..918e061785d 100644 --- a/src/components/input/input.js +++ b/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 { diff --git a/src/components/input/input.spec.js b/src/components/input/input.spec.js index 76a051f19dd..467f105f73a 100644 --- a/src/components/input/input.spec.js +++ b/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;