Merge pull request #616 from PolymerElements/fix-label-not-resetting-…

…on-undefined

Fix label not resetting on undefined

paper-input-container.html

@@ -502,6 +502,12 @@
     },
 
     ready: function() {
+      // Paper-input treats a value of undefined differently at startup than
+      // the rest of the time (specifically: it does not validate it at startup, but
+      // it does after that. We need to track whether the first time we encounter
+      // the value is basically this first time, so that we can validate it
+      // correctly the rest of the time. See https://github.com/PolymerElements/paper-input/issues/605
+      this.__isFirstValueUpdate = true;
       if (!this._addons) {
         this._addons = [];
       }
@@ -553,16 +559,15 @@
     _onValueChanged: function(event) {
       var input = event.target;
 
-      // Problem: if the input is required but has no text entered, we should
-      // only validate it on blur (so that an empty form doesn't come up red
-      // immediately; however, in this handler, we don't know whether this is
-      // the booting up value or a value in the future. I am assuming that the
-      // case  we care about manifests itself when the value is undefined.
-      // If this causes future problems, we need to do something like track whether
-      // the iron-input-ready event has fired, and this handler came before that.
-
-      if (input.value === undefined) {
-        return;
+      // Paper-input treats a value of undefined differently at startup than
+      // the rest of the time (specifically: it does not validate it at startup, but
+      // it does after that. If this is in fact the bootup case, ignore validation,
+      // just this once.
+      if (this.__isFirstValueUpdate) {
+        this.__isFirstValueUpdate = false;
+        if (input.value === undefined) {
+          return;
+        }
       }
 
       this._handleValueAndAutoValidate(event.target);

test/paper-input.html

@@ -190,6 +190,63 @@
         }, 1);
       });
 
+      test('setting the value to the empty string unfloats the label', function(done) {
+        var input = fixture('basic');
+
+        // Mutation observer is async, so wait one tick.
+        Polymer.Base.async(function() {
+          // Initially the value isn't floating.
+          assert.equal(getFloatingLabel(input), null);
+
+          // The label is floating if it has a value.
+          input.value = 'foobar';
+          assert.ok(getFloatingLabel(input));
+
+          // The label isn't floating if it gets reset.
+          input.value = '';
+          assert.equal(getFloatingLabel(input), null);
+          done();
+        }, 1);
+      });
+
+      test('setting the value to null unfloats the label', function(done) {
+        var input = fixture('basic');
+
+        // Mutation observer is async, so wait one tick.
+        Polymer.Base.async(function() {
+          // Initially the value isn't floating.
+          assert.equal(getFloatingLabel(input), null);
+
+          // The label is floating if it has a value.
+          input.value = 'foobar';
+          assert.ok(getFloatingLabel(input));
+
+          // The label isn't floating if it gets reset.
+          input.value = null;
+          assert.equal(getFloatingLabel(input), null);
+          done();
+        }, 1);
+      });
+
+      test('setting the value to undefined unfloats the label', function(done) {
+        var input = fixture('basic');
+
+        // Mutation observer is async, so wait one tick.
+        Polymer.Base.async(function() {
+          // Initially the value isn't floating.
+          assert.equal(getFloatingLabel(input), null);
+
+          // The label is floating if it has a value.
+          input.value = 'foobar';
+          assert.ok(getFloatingLabel(input));
+
+          // The label isn't floating if it gets reset.
+          input.value = undefined;
+          assert.equal(getFloatingLabel(input), null);
+          done();
+        }, 1);
+      });
+
       test('always-float-label attribute works without placeholder', function() {
         var input = fixture('always-float-label');
         var container = Polymer.dom(input.root).querySelector('paper-input-container');