I'm having trouble resetting the label inside a paper-input-container after submitting a form. The form is a simple login form. If a user logs in, out, and back in again without a page refresh (from the browser), the label appears to be stuck as if there were a value in the input.

Here's an image to show the difference:

Here's the form inside the element:

<form is="iron-form">

    <paper-input-container id="email_container">
        <paper-input-error>E-mail or Password is incorrect</paper-input-error>
        <label>E-Mail Address</label>
        <input is="iron-input" id="email" on-blur="validateEmail" value="{{emailInput::input}}">
        </paper-input-container>

        <paper-input-container id="password_container">
            <label>Password</label>
            <input is="iron-input" id="password" type="password" value="{{passwordInput::input}}">
        </paper-input-container>

    <paper-button raised dialog-dismiss>Cancel</paper-button>
    <paper-button raised on-tap="handleCsrf">Login</paper-button>

</form>

These two approaches both get the form to the "after login" state the same:

//
this.emailInput = null;
this.passwordInput = null;

//
this.emailInput = "";
this.passwordInput = "";

I thought this would reset the entire container somehow, but it does nothing:

this.$.email_container = null;
this.$.password_container = null;

I'm having trouble resetting the label inside a paper-input-container after submitting a form. The form is a simple login form. If a user logs in, out, and back in again without a page refresh (from the browser), the label appears to be stuck as if there were a value in the input.

Here's an image to show the difference:

Here's the form inside the element:

<form is="iron-form">

    <paper-input-container id="email_container">
        <paper-input-error>E-mail or Password is incorrect</paper-input-error>
        <label>E-Mail Address</label>
        <input is="iron-input" id="email" on-blur="validateEmail" value="{{emailInput::input}}">
        </paper-input-container>

        <paper-input-container id="password_container">
            <label>Password</label>
            <input is="iron-input" id="password" type="password" value="{{passwordInput::input}}">
        </paper-input-container>

    <paper-button raised dialog-dismiss>Cancel</paper-button>
    <paper-button raised on-tap="handleCsrf">Login</paper-button>

</form>

These two approaches both get the form to the "after login" state the same:

//
this.emailInput = null;
this.passwordInput = null;

//
this.emailInput = "";
this.passwordInput = "";

I thought this would reset the entire container somehow, but it does nothing:

this.$.email_container = null;
this.$.password_container = null;

• javascript
• polymer

3 Answers 3

iron-input

bindValue String Use this property instead of value for two-way data binding.

   <paper-input-container id="email_container">
    <paper-input-error>E-mail or Password is incorrect</paper-input-error>
    <label>E-Mail Address</label>
    <input is="iron-input" id="email" on-blur="validateEmail" bind-value="{{emailInput::input}}">
    </paper-input-container>

    <paper-input-container id="password_container">
        <label>Password</label>
        <input is="iron-input" id="password" type="password" bind-value="{{passwordInput::input}}">
    </paper-input-container>

With bindValue apparently both this.emailInput = null and this.set('emailInput, null) do the trick.

I'm not sure why the first form didn't work (I'm using a paper-input, not iron-input, and it worked there), it's possible the problem is somewhere in the code not shown. But something else to try is directly setting the value:

this.$.email.value = null; // where 'email' is the ID of the iron-input

I'm not entirely sure how this will interact with bind-value, but the docs do say

iron-input adds the bind-value property that mirrors the value property

You can reset a plete iron-form by calling the reset() method:

document.getElementById('idOfForm').reset();