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

petebacondarwin · petebacondarwin · commit d5d9ad1cc60c · 2016-10-11T13:35:50.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/compile.js b/src/ng/compile.js
@@ -2085,13 +2085,17 @@ function $CompileProvider($provide, $$sanitizeUriProvider) {
       var nodeType = node.nodeType,
           attrsMap = attrs.$attr,
           match,
+          nodeName,
           className;
 
       switch (nodeType) {
         case NODE_TYPE_ELEMENT: /* Element */
+
+          nodeName = nodeName_(node);
+
           // use the node name: <directive>
           addDirective(directives,
-              directiveNormalize(nodeName_(node)), 'E', maxPriority, ignoreDirective);
+              directiveNormalize(nodeName), 'E', maxPriority, ignoreDirective);
 
           // iterate over the attributes
           for (var attr, name, nName, ngAttrName, value, isNgAttr, nAttrs = node.attributes,
@@ -2133,6 +2137,12 @@ function $CompileProvider($provide, $$sanitizeUriProvider) {
                           attrEndName);
           }
 
+          if (nodeName === 'input' && node.getAttribute('type') === 'hidden') {
+            // Hidden input elements can have strange behaviour when navigating back to the page
+            // This tells the browser not to try to cache and reinstate previous values
+            node.setAttribute('autocomplete', 'off');
+          }
+
           // use class as directive
           if (!cssClassDirectivesEnabled) break;
           className = node.className;
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);
+  });
+});
