Noticed an issue when using a form like that:
<div class="row">
<iron-icon icon="my-icons:person"></iron-icon>
<paper-input required id="firstName" value="[[firstName]]" label="First name" on-value-changed="_firstNameChanged">
<iron-icon icon="clear" hidden$="[[!firstName]]" slot="suffix" class="input-icon" on-click="_clearInput"></iron-icon>
</paper-input>
</div>
<div class="row">
<iron-icon icon="my-icons:person"></iron-icon>
<paper-input required id="lastName" value="[[lastName]]" label="Last name" on-value-changed="_lastNameChanged">
<iron-icon icon="clear" hidden$="[[!lastName]]" slot="suffix" class="input-icon" on-click="_clearInput"></iron-icon>
</paper-input>
</div>
<div class="row">
<iron-icon icon="communication:phone"></iron-icon>
<paper-input required id="phone" value="[[phone]]" label="Phone" type="tel" on-value-changed="_phoneChanged">
<iron-icon icon="clear" hidden$="[[!phone]]" slot="suffix" class="input-icon" on-click="_clearInput"></iron-icon>
</paper-input>
</div>
<div class="row">
<iron-icon icon="communication:email"></iron-icon>
<paper-input required id="email" value="[[email]]" label="Email" type="email" on-value-changed="_emailChanged">
<iron-icon icon="clear" hidden$="[[!email]]" slot="suffix" class="input-icon" on-click="_clearInput"></iron-icon>
</paper-input>
</div>
<div class="row">
<iron-icon icon="communication:email"></iron-icon>
<paper-input required id="email" value="[[email]]" label="Email" type="email" on-value-changed="_emailChanged">
<iron-icon icon="clear" hidden$="[[!email]]" slot="suffix" class="input-icon" on-click="_clearInput"></iron-icon>
</paper-input>
</div>
I get a form, where the tab arrows, which are enabled by default in a simple input form, are disabled (see screenshot below).
The question is: is there a way to get them working?
I tried:
- tabindex
- wrap this in a tag
- remove all icon tags wrap
- paper-input in an tag
the screenshot:
