CODEWITHSUNDEEP
reactjssemantic-ui-react
Andrej Zacharenkov
Andrej Zacharenkov

Reputation: 71

Semantic input components and LastPass icons

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!

Upvotes: 4

Views: 1502

Answers (2)

brianespinosa
brianespinosa

Reputation: 2408

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

Upvotes: 1

Roy.B
Roy.B

Reputation: 2106

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

Upvotes: 3

Related Questions