Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – How to get rid of devtools hint in input autofill in Chrome

Recently when I’m working with inputs in React / Javascript and I click into the inputs to type stuff like address etc, Chrome opens up this strange context menu which is unwanted by me. Is there a way to disable this? I’ve tried turning autofill off in Chrome settings (Autofill and passwords) but it doesn’t help.

enter image description here

Tags:

2

Answers


  1. 0

    Using autocomplete="off"

    <input type="text" name="address" autocomplete="off" />

    Disable Autofill Using JavaScript

    import React, { useEffect } from 'react';

function MyComponent() {
  useEffect(() => {
    document.querySelectorAll('input').forEach(input => {
      input.setAttribute('autocomplete', 'new-password');
    });
  }, []);

  return (
    <div>
      <input type="text" name="address" />
    </div>
  );
}

export default MyComponent;

    `

    Login or Signup to reply.
  2. 0

    This is a really irritating feature that was enabled in Chrome, it now blocks the input fields from view and also no longer allows you to make a selection from a menu with the keyboard when DevTools is open. Why they did not provide a feature to disable it I don’t know.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search