How to prevent browser extension icons (Last Pass) from appearing in fields in React Apps?

Question

In my web app I have a create-user page, and users with the Last Pass extension in their browsers get Last Pass icons appearing in some fields. I want to prevent these icons from appearing.

I have found that for straight css, one can do

<input type="text" name="username" id="username" data-lpignore="true">

but I don't know how to replicate that inside a React App.

Answer 1

You can add HTML attributes directly in React 16+, referring to this answer.

If you are using a form library, check if they expose refs and add attributes using them, or (discouraged) add a useEffect hook or componentDidMount function and modify attribute using document.getElementById('id').setAttribute('data-lpignore', 'true')