Search code examples
javascripthtmlformsauthenticationpolymer

My login passwords won't autocomplete when I enter my email in polymer 2


In my polymer 2 app I have something like this:

<form class="styling" autocomplete="on">
    <div class="styling" >
        <label>email</label>
        <input name="email" autocomplete="email">
    </div>
    <div class="styling" >
        <label>email</label>
        <input name="password" autocomplete="current-password">
    </div>
    <div class="styling">
        <a class="styling" on-tap="doRequestFunction">Login<a>
    </div>
</form>

My issue is there are a lot of sources saying what works and what doesn't and I've tried removing the outer div, I've tried changing the email to a username, I've tried to change the <a> to an <input type="submit">. I've also tried to add an invisible username input below the email input. I have a database element that does my ajax calls so ideally I'd like to just call the request function on a form submit, but there doesn't appear to be a way to do this because it wants me to perform the action with a file or something like that.

TL;DR is there a way to do this:

<form class="styling" onSubmit="doTheRequestFunction" autocomplete="on">
    <div class="styling" >
        <label>email</label>
        <input name="email" autocomplete="email"/>
    </div>
    <div class="styling" >
        <label>email</label>
        <input name="password" autocomplete="current-password"/>
    </div>
    <div class="styling">
        <input class="styling" type="submit">Login</input>
    </div>
</form>

There doesn't appear to be a way to do this in polymer and the ways that do don't request for the users password and are depreciated anyways. Using Chrome primarily.

EDIT: Please, no JQuery, only Javascript. I don't know what JQuery is doing half the time and it's sloppy.


Solution

  • Boys, I found it.

    paper-input autocomplete fails to fill

    This is a polymer specific issue I was having. Currently polymer requested support for their auto-fill apparently and it's still not there. This is the solution for now. Pop that bad boy into you index.html and weep tears of joy.