Wrong initial state

[dominik0711]

I'm using the gold-email-input element in my login view and bind the value to my stored E-Mail address. This is the DOM:

<gold-email-input id="email" name="email" auto-validate="" autocomplete="true" required="" class="style-scope aw-login" aria-disabled="false">
    <paper-input-container id="container" class="style-scope gold-email-input x-scope paper-input-container-0">
       <div class="floated-label-placeholder style-scope paper-input-container">&nbsp;</div>
    <template is="dom-if" class="style-scope paper-input-container"></template>
    <div class="input-content label-is-floating is-invalid style-scope paper-input-container">
      <label class="style-scope gold-email-input" id="paper-input-label-797">E-Mail</label><input is="iron-input" id="input" validator="email-validator" autocomplete="email" class="style-scope gold-email-input" required="" placeholder="" aria-describedby="" name="email" aria-labelledby="paper-input-label-797"><template is="dom-if" class="style-scope gold-email-input"></template>
    </div>
    <div class="underline is-invalid style-scope paper-input-container">
      <div class="unfocused-line fit style-scope paper-input-container"></div>
      <div class="focused-line fit style-scope paper-input-container"></div>
    </div>
    <div class="add-on-content is-invalid style-scope paper-input-container">   
    </div>
  </paper-input-container>
  </gold-email-input>

As you can see in the screenshot below, the value is set to my email address but the underline and the floating-label are red:

Do I need to trigger validation? The gold-email-input has the attribute auto-validate, autocomplete and required! Do I need to set these attributes???

[notwaldorf]

@dominik0711 I'm not sure what your code means -- is that the html that you wrote, or the DOM you see in the dev tools? In any case, this line:

<gold-email-input auto-validate required autocomplete="true" value="[email protected]"></gold-email-input>

correctly displays the email as being initially valid:

Can you get this to repro in jsbin, or send a snippet of the code you're writing?

[dominik0711]

As written above, the code is the DOM in the debugger (dev tool). This is my code:

<gold-email-input id="email"
                  name="email"
                  auto-validate
                  label="{{i18n.email}}"
                  value="{{user.email}}"
                  required>
</gold-email-input>
...
ready: function () {
  this.app = au.app;
  this.user = au.auth.user;
...
}

As you can see value is set by a global object au.auth.user. Inside au.auth.user the property email will be retrieved from localStorage.

[srikkbhat]

I have the same issue. I have created this plunker to capture the issue.

http://plnkr.co/edit/OQuLBTj9LXJSz7XXnBW0?p=preview

Is there any temporary fix. The field shows error message whenever user tries to edit existing data.

[Typel]

I'm not sure if this is related, but after a bower update I'm getting no initial underline under gold-email-inputs, although they still appear on paper-inputs, gold-phone-inputs, etc. Using Chrome's code inspector, I found the specific property which is causing the issue, but it appears to be one of the properties that gets shipped natively with the element?

.paper-input-container-0 .unfocused-line.paper-input-container { position:absolute; }

Without that style, the problem goes away. The calculated styles I get for gold-phone-input and paper-input both have "position" set to relative. I was planning to fix it with a css mixin, but I see that all the various input elements share a common styling container - PaperInputContainer. Since the other input elements work, I'm guessing the problem exists specifically with gold-email-input?