How can I prevent password managers from overwriting disabled fields using JavaScript?

Question

We have a system with a few forms built using Next.js. Among them, there's a user data form that includes fields for name, email, and address. The email field is intentionally disabled and cannot be modified after a user signs up for the system. However, we've encountered an issue where, despite using the 'disabled' property, password managers like LastPass can overwrite the email field with their stored value. Is there a way to prevent this behaviour in javascript

Answer 1

We managed to come up with a solution by implementing event listeners. We used the useEffect hook to attach an event listener to the email input field, specifically listening for the input event. Initially, we tried to prevent the default behaviour using event.preventDefault(), but, unfortunately, this method didn't work for LastPass. As a workaround, we resolved the issue by reassigning the initial value whenever the event listener was triggered.

  useEffect(() => {
    const emailField = document.getElementById("emailInput");
    emailField.addEventListener("input", (event) => {
      event.preventDefault(); 
      emailField.value = user.email;
    });
  }, []);