How to prevent LastPass from displaying icon inside lightning-input

Question

Based on this LastPass guidance I've tried data-lpignore and data-lpignore="true", per this markup:

  <lightning-input
        if:true={colmod.showme}
        required={colmod.required}
        type={colmod.type}                    
        data-api={colmod.fieldName}
        label={colmod.label}
        readonly={colmod.readonlyeditor}
        onchange={onInputChange}
        variant="label-inline"
        data-lpignore="true"
    ></lightning-input>

But I still get results that look like this:

FWIW - I don't see the data- items in the rendered DOM, so I suppose it's all in the shadows - anyone else find a successful solution to this? Not interested in requiring users to modify/disable LastPass yet.

Answer 1

After re-reading the LastPass guidance, I realized I had not done this:

In your LastPass browser extension preferences (Advanced settings), enable the Respect AutoComplete=off setting, which will allow websites to disable the autofill feature.

Once I did, it started working as advertised. Yes, right after I posted this question

Answer 2

Otherwise, if you want to hide it on specific form of specific input, you can use CSS. Something like :

 svg[data-lastpass-icon=true]{
    visibility:none;
 }

Answer 3

This CSS snippet helped me where autocomplete and data-lpignore did not work, out of box:

div[data-lastpass-icon-root] {
    display: none !important;
}

Answer 4

You should find other to replace lasspass, because It may be make wrong data be cause autofill in any Form. This problem still along time, but lasspass not fix it!