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

petebacondarwin · petebacondarwin · commit b879223cf3d3 · 2016-10-10T22:22:30.000+01:00
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. `&lt;input type="hidden" value="{{ 1 + 2 }}"&gt;` since when the browser
returns, instead of the original interpolation template, the HTML contains
the previous value `&lt;input type="hidden" value="3"&gt;`.

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.
diff --git a/src/ng/directive/input.js b/src/ng/directive/input.js
@@ -1535,13 +1535,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,15 @@
+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);
+  });
+});
