fix(input): ensure that hidden input values are correct after history…

….back Due to the nature of some browser's PageCache/BFCache, returning to an Angular app sometimes causes `input[hidden]` elements to retain the last value that was stored before the page was navigated away from previously. This is particularly problematic if the input has an interpolated value. E.g. `<input type="hidden" value="{{ 1 + 2 }}">` since when the browser returns, instead of the original interpolation template, the HTML contains the previous value `<input type="hidden" value="3">`. This commit instructs the browser not to attempt to reinstate the previous value when navigating back in history by setting `autocomplete="off"` on the hidden input element element.
angular · Oct 7, 2016 · 298f8c4d13fbaa104845619e5518cb03c2aad05b · 298f8c4 · TolonUK · Oct 11, 2016
1 parent 138fbf0
commit 298f8c4d13fbaa104845619e5518cb03c2aad05b
Unified Split

Showing with 36 additions and 6 deletions.

+9 −6 src/ng/directive/input.js

+10 −0 test/e2e/fixtures/input-hidden/index.html

+17 −0 test/e2e/tests/input-hidden.spec.js
diff --git a/src/ng/directive/input.js b/src/ng/directive/input.js
@@ -2002,13 +2002,16 @@ var inputDirective = ['$browser', '$sniffer', '$filter', '$parse',
   return {
     restrict: 'E',
     require: ['?ngModel'],
-    link: {
-      pre: function(scope, element, attr, ctrls) {
-        if (ctrls[0]) {
-          (inputType[lowercase(attr.type)] || inputType.text)(scope, element, attr, ctrls[0], $sniffer,
-                                                              $browser, $filter, $parse);
+    compile: function(tElement, tAttr) {
+      if (lowercase(tAttr.type) === 'hidden') tAttr.$set('autocomplete', 'off');
+      return {
+        pre: function(scope, element, attr, ctrls) {
+          if (ctrls[0]) {
+            (inputType[lowercase(attr.type)] || inputType.text)(scope, element, attr, ctrls[0], $sniffer,
+                                                                $browser, $filter, $parse);
+          }
         }
-      }
+      };
     }
   };
 }];

diff --git a/test/e2e/fixtures/input-hidden/index.html b/test/e2e/fixtures/input-hidden/index.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html ng-app>
+  <body>
+    <form>
+      <input type="hidden" value="{{value}}" />
+      <button ng-click="value = '{{ 7 * 6 }}'">Click me</button>
+    </form>
+    <script src="angular.js"></script>
+  </body>
+</html>
diff --git a/test/e2e/tests/input-hidden.spec.js b/test/e2e/tests/input-hidden.spec.js
@@ -0,0 +1,17 @@
+'use strict';
+
+describe('hidden thingy', function() {
+  it('should pass', function() {
+
+    loadFixture('input-hidden');
+    expect(element(by.css('input')).getAttribute('value')).toEqual('');
+
+    element(by.css('button')).click();
+    expect(element(by.css('input')).getAttribute('value')).toEqual('{{ 7 * 6 }}');
+
+    loadFixture('sample');
+    browser.driver.executeScript('history.back()');
+    var expectedValue = browser.params.browser === 'safari' ? '{{ 7 * 6 }}' : '';
+    expect(element(by.css('input')).getAttribute('value')).toEqual(expectedValue);
+  });
+});