Semantic input components and LastPass icons

Question

Is there any way to prevent LastPass to stop putting a LastPass Icon on the Semantic rendered inputs (Dropdown and Checkbox)?

I know I can put data-lpignore="true" onto to prevent it from happening - but I have no access to that tag in the above-mentioned components...

Thanks for any tips and help!

Roy.B · Answer 1 · 2018-07-09T14:41:14.393

3

try adding autocomplete="off" attribute to the form

if that doesn't work, am seeing lots of blog posts that say to add "search" to the id, id="checkbox-search" but that's obviously dirty way and depends on how much you want to get rid of that

edited Jul 09 '18 at 14:41

answered Jul 09 '18 at 14:34

Roy.B

2,076
14
23

Unfortunately, that didn't seem to work. the Dropdown component seems to already render the input tag with autocomplete="off" and a class="search". I cannot pass anything to Dropdown component that would be passed onto its rendered input tag. Also, LastPass seems to render 2 icons for me - one in a form of a div that keeps on jumping to different rendered inputs, and the other one as a background-image on the input for lastPass icon.. In my case - the Dropdown and Checkbox input tags get the 'jumping' LastPass icon div rather than the background-image style one. – Andrej Zacharenkov Jul 11 '18 at 08:54

score 1 · Answer 2 · answered Jul 23 '18 at 16:01

You CAN actually add that data parameter to the <input> tag in your markup. You just have to define your component's markup in a slightly different way. And you do not lose any of the auto controlled magic of SUIR interactions.

This is the only way to get that data parameter to attach to the <input> tag instead of the containing parent <div>.

<Form>
  <Form.Field>
    <label>Address</label>
    <Input >
      <input data-lpignore="true" />
    </Input>
  </Form.Field>
</Form>

And here's a working codesandbox to show it working: https://codesandbox.io/s/230qz1vqj0

Semantic input components and LastPass icons

2 Answers2