diff options
| author | Tobias Bosch | 2013-11-22 16:34:33 -0800 |
|---|---|---|
| committer | Tobias Bosch | 2013-11-22 17:02:21 -0800 |
| commit | a090400f09d7993d102f527609879cdc74abae60 (patch) | |
| tree | e2fc4cba3509b32c00f33df2bf912246f3f5c7f9 | |
| parent | 84e0eea1645521f6a990a4dabeb53407db86eda2 (diff) | |
| download | angular.js-a090400f09d7993d102f527609879cdc74abae60.tar.bz2 | |
fix(input): Support form auto complete on modern browser
Although modern browser support the "input" event, they still only fire
the "change" event when they auto complete form elements
other than the currently selected one.
Related to #1460
| -rw-r--r-- | src/ng/directive/input.js | 6 | ||||
| -rw-r--r-- | test/ng/directive/inputSpec.js | 26 |
2 files changed, 29 insertions, 3 deletions
diff --git a/src/ng/directive/input.js b/src/ng/directive/input.js index ea4d84f4..8307f7e8 100644 --- a/src/ng/directive/input.js +++ b/src/ng/directive/input.js @@ -449,15 +449,15 @@ function textInputType(scope, element, attr, ctrl, $sniffer, $browser) { deferListener(); }); - // if user paste into input using mouse, we need "change" event to catch it - element.on('change', listener); - // if user modifies input value using context menu in IE, we need "paste" and "cut" events to catch it if ($sniffer.hasEvent('paste')) { element.on('paste cut', deferListener); } } + // if user paste into input using mouse on older browser + // or form autocomplete on newer browser, we need "change" event to catch it + element.on('change', listener); ctrl.$render = function() { element.val(ctrl.$isEmpty(ctrl.$viewValue) ? '' : ctrl.$viewValue); diff --git a/test/ng/directive/inputSpec.js b/test/ng/directive/inputSpec.js index c6f5558a..892c1b7f 100644 --- a/test/ng/directive/inputSpec.js +++ b/test/ng/directive/inputSpec.js @@ -468,6 +468,32 @@ describe('input', function() { expect(scope.name).toEqual('adam'); }); + describe('"change" event', function() { + function assertBrowserSupportsChangeEvent(inputEventSupported) { + // Force browser to report a lack of an 'input' event + $sniffer.hasEvent = function(eventName) { + if (eventName === 'input' && !inputEventSupported) { + return false; + } + return true; + }; + compileInput('<input type="text" ng-model="name" name="alias" />'); + + inputElm.val('mark'); + browserTrigger(inputElm, 'change'); + expect(scope.name).toEqual('mark'); + } + + it('should update the model event if the browser does not support the "input" event',function() { + assertBrowserSupportsChangeEvent(false); + }); + + it('should update the model event if the browser supports the "input" ' + + 'event so that form auto complete works',function() { + assertBrowserSupportsChangeEvent(true); + }); + }); + describe('"paste" and "cut" events', function() { beforeEach(function() { // Force browser to report a lack of an 'input' event |
