Ionic-framework: Ionic input fields are not compatible with with lastpass

[stripathix]

Bug Report

Ionic Info
Run ionic info from a terminal/cmd prompt and paste the output below.

Using ionic beta.15 via CDN

Describe the Bug
Last pass does not fills any input fields and i dont even see any lastpass icons in my email/password fields

Related Code

<form id="loginregisterformprimary" name="loginregisterformprimary" novalidate>
             <ion-item>
              <ion-label>Email</ion-label>
              <ion-input autocomplete="on" type="email" v-on:keyup.13="accountFormSubmit"  v-validate="'required|email'" name="username" :value="accountDetail.useremail"  @ionInput="accountDetail.useremail = $event.target.value" placeholder="Enter Your Email"></ion-input>
            </ion-item>

            <ion-item>
              <ion-label>Password</ion-label>
              <ion-input autocomplete="on" v-validate="'required'" v-on:keyup.13="accountFormSubmit" name="password"  type="password" :value="accountDetail.userpassword" @ionInput="accountDetail.userpassword = $event.target.value" placeholder="Enter Your Password"></ion-input>
            </ion-item>
            <ion-button shape="round" color="warning" id="loginbutton" :disabled="errors.any() || !isLoginFormComplete"  v-if="visibleViewIndex == 2" v-on:click="loginNow()" expand="full">
                Login
            </ion-button>
          </form>

Expected Behavior
Should be compatible with LastPass as it is pretty commonly used extension.

I am not sure if it is Ionic issue or lastpass issue.

[paulstelzer]

I think this is not a problem of lastpass, I think it's a problem because Ionic uses shadow dom and so Lastpass has no access to it. I add it as feature request, but cannot say if this is possible.

[paulstelzer]

Talked with the Ionic Dev team, this could be fixed with the next beta :)

[MarkChrisLevy]

@paulstelzer any chance it will be fixed in in next rc/final release? for android/ios app is not a problem, but for web app it is, as password cannot be remembered by the browser.

[paulstelzer]

if it's not fixed with rc.0, then it's a problem with shadow dom and cannot be fixed. could you check?

[MarkChrisLevy]

@paulstelzer Not fixed in rc.0 for sure and yes it is well known problem of shadow dom, but it can be fixed, either by disabling shadow for input component or allowing to add <input> as child element of <ion-input> and making that child a "native-input" (rather than creating new element inside ion-input), although I don't if it is possible in stencil write "conditional render" function. @manucorporat any thought on that issue?

[paulstelzer]

if you analyze in DOM, there you can see a input field that is hidden. So the solution you said is already implemented, so I hoped it's fixed now because @manucorporat added this already,

But ion-input itself is under the shadow flag (https://github.com/ionic-team/ionic/blob/master/core/src/components/input/input.tsx#L13)

[MarkChrisLevy]

@paulstelzer The input that is not shadowed is of "hidden" type, the real password input is still under shadow dom.

[paulstelzer]

@mmlleevvyy I know, see my feature request -> https://github.com/ionic-team/ionic/issues/17020

[MarkChrisLevy]

@paulstelzer Great! Thanks for FR, it is exactly how I see it.

[manucorporat]

This should be fixed in master!

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.