fix resetting of paper-input and paper-textarea

demo/index.html

@@ -18,6 +18,7 @@
 
   <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
   <link rel="import" href="../../paper-input/paper-input.html">
+  <link rel="import" href="../../paper-input/paper-textarea.html">
   <link rel="import" href="../../paper-button/paper-button.html">
   <link rel="import" href="../../paper-styles/demo-pages.html">
   <link rel="import" href="../../paper-checkbox/paper-checkbox.html">
@@ -38,8 +39,10 @@
       <h4>method="get"</h4>
       <div class="horizontal-section">
         <form is="iron-form" id="formGet" method="get" action="/">
-          <paper-input name="name" label="Name" required></paper-input>
-          <paper-input name="animal" label="Favourite animal" required></paper-input>
+          <input name="name1" required value="batman">
+          <paper-input name="name" label="Name" required value="batman"></paper-input>
+          <paper-textarea name="name" label="Name" required value="batman"></paper-textarea>
+          <!-- <paper-input name="animal" label="Favourite animal" required></paper-input>
           <br>
 
           <input type="checkbox" name="food" value="donuts" checked> I like donuts<br>
@@ -65,7 +68,7 @@ <h4>method="get"</h4>
             <simple-element required name="custom-two"></simple-element><br>
           </p>
 
-          <br><br>
+          <br><br> -->
 
           <paper-button raised
               onclick="submitHandler(event)">Submit</paper-button>

iron-form.html

@@ -450,6 +450,21 @@
             el.checked = this._customElementsInitialValues[i];
           } else {
             el.value = this._customElementsInitialValues[i];
+
+            // <paper-input> has a problem here in the shady DOM.
+            // Because it contains a native <input>, the form has already reset
+            // it (and in particular, to its default, empty value, pre-bindings),
+            // and since it was a programmatic update, no event was fired. We
+            // need to manually update the native element's value as well.
+            if (el.inputElement) {
+              el.inputElement.value = el.value;
+            } else if (el.textarea) {
+              // The same thing happens for `<paper-textarea>`, only worse:
+              // we registered the `iron-autogrow-texarea` which uses a `bindValue`
+              // and not a `value`, so it wasn't even updated correctly.
+              // TODO(notwaldorf): See if https://github.com/PolymerElements/iron-form/pull/107 fixes this.
+              el.bindValue = el.textarea.value = this._customElementsInitialValues[i];
+            }
           }
           el.invalid = false;
         }

test/basic.html

@@ -16,6 +16,8 @@
   <script src="../../web-component-tester/browser.js"></script>
 
   <link rel="import" href="../../polymer/polymer.html">
+  <link rel="import" href="../../paper-input/paper-input.html">
+  <link rel="import" href="../../paper-input/paper-textarea.html">
   <link rel="import" href="../iron-form.html">
   <link rel="import" href="simple-element.html">
 
@@ -109,6 +111,8 @@
     <template>
       <form is="iron-form">
         <simple-element name="zig" value="zag"></simple-element>
+        <paper-input name="zig" value="zug"></paper-input>
+        <paper-textarea name="zig" value="zog"></paper-textarea>
         <input name="foo" value="bar">
         <input type="checkbox" name="foo" value="bar1" checked>
         <input type="checkbox" name="foo" value="bar2">
@@ -321,44 +325,93 @@
   });
 
   suite('resetting', function () {
-    test('form restores the default values', function(done) {
+    test('form restores the default values if changes were made', function(done) {
       var form = fixture('FormForResetting');
 
-      assert.equal(form._customElements.length, 1);
-      assert.equal(form.elements.length, 3);
-
       // Initial values.
       var customElement = form.querySelector('simple-element');
       var input = form.querySelector('input[name="foo"]');
       var checkbox1 = form.querySelectorAll('input[type="checkbox"]')[0];
       var checkbox2 = form.querySelectorAll('input[type="checkbox"]')[1];
+      var paperInput = form.querySelector('paper-input');
+      var paperTextarea = form.querySelector('paper-textarea');
 
       assert.equal(customElement.value, 'zag');
       assert.equal(input.value, 'bar');
       assert.isTrue(checkbox1.checked);
       assert.isFalse(checkbox2.checked);
+      assert.equal(paperInput.value, 'zug');
+      assert.equal(paperInput.inputElement.value, 'zug');
+      assert.equal(paperTextarea.value, 'zog');
+      assert.equal(paperTextarea.inputElement.textarea.value, 'zog');
 
       // Change the values.
       customElement.value = 'not zag';
       input.value = 'not bar';
       checkbox1.checked = false;
       checkbox2.checked = true;
+      paperInput.value = 'not zug';
+      paperTextarea.value = 'not zog';
+
       assert.equal(customElement.value, 'not zag');
       assert.equal(input.value, 'not bar');
       assert.isFalse(checkbox1.checked);
       assert.isTrue(checkbox2.checked);
+      assert.equal(paperInput.value, 'not zug');
+      assert.equal(paperInput.inputElement.value, 'not zug');
+      assert.equal(paperTextarea.value, 'not zog');
+      assert.equal(paperTextarea.inputElement.textarea.value, 'not zog');
 
       form.addEventListener('iron-form-reset', function(event) {
         // Restored initial values.
         assert.equal(customElement.value, 'zag');
         assert.equal(input.value, 'bar');
         assert.isTrue(checkbox1.checked);
         assert.isFalse(checkbox2.checked);
+        assert.equal(paperInput.value, 'zug');
+        assert.equal(paperInput.inputElement.value, 'zug');
+        assert.equal(paperTextarea.value, 'zog');
+        assert.equal(paperTextarea.inputElement.textarea.value, 'zog');
         done();
       });
 
       form.reset();
+    });
+
+    test('form restores the default values if no changes were made', function(done) {
+      var form = fixture('FormForResetting');
+
+      // Initial values.
+      var customElement = form.querySelector('simple-element');
+      var input = form.querySelector('input[name="foo"]');
+      var checkbox1 = form.querySelectorAll('input[type="checkbox"]')[0];
+      var checkbox2 = form.querySelectorAll('input[type="checkbox"]')[1];
+      var paperInput = form.querySelector('paper-input');
+      var paperTextarea = form.querySelector('paper-textarea');
 
+      assert.equal(customElement.value, 'zag');
+      assert.equal(input.value, 'bar');
+      assert.isTrue(checkbox1.checked);
+      assert.isFalse(checkbox2.checked);
+      assert.equal(paperInput.value, 'zug');
+      assert.equal(paperInput.inputElement.value, 'zug');
+      assert.equal(paperTextarea.value, 'zog');
+      assert.equal(paperTextarea.inputElement.textarea.value, 'zog');
+
+      form.addEventListener('iron-form-reset', function(event) {
+        // Restored initial values.
+        assert.equal(customElement.value, 'zag');
+        assert.equal(input.value, 'bar');
+        assert.isTrue(checkbox1.checked);
+        assert.isFalse(checkbox2.checked);
+        assert.equal(paperInput.value, 'zug');
+        assert.equal(paperInput.inputElement.value, 'zug');
+        assert.equal(paperTextarea.value, 'zog');
+        assert.equal(paperTextarea.inputElement.textarea.value, 'zog');
+        done();
+      });
+
+      form.reset();
     });
 
     test('validation messages are cleared', function(done) {