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');