diff --git a/paper-input-container.html b/paper-input-container.html
index 3c55d9c9..86a093ef 100644
--- a/paper-input-container.html
+++ b/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);
diff --git a/test/paper-input.html b/test/paper-input.html
index 4aa36132..7bfa3ed0 100644
--- a/test/paper-input.html
+++ b/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');