How to turn off input autocomplete?

Question

I have a nextjs app that has a form with first name, last name, email, address, phone. I have wired it with React hook form. Almost all my clients use safari, and when safari autocompletes a field, it does not update the state, so no data is send to the server and an error appears, that you need to fill the fields that are already filled, so the user just quits.

I've put autocomplete on "off", "none" etc. I've put that on every single field and on the form tag itself, as well as on a hidden input field. I've tried various different combinations, but none of them seem to work and stop the autocomplete feature. The best result i have achieved so far is that now it autofills the current input only, not the whole form. But that is not the desired result.

Answer 1

After long testing I've found a solution to this.

But first i am going to list the different parial solutions, if anyone needs a specific one

Things i tried

1. Make browser autofill only one input at a time

Setting an attribute autocomplete="off" to the form and autocomplete="none" to all the inputs resulted in autofill only suggesting and autocompleting a single field, instead of the whole form. This feature was tested on chrome and on firefox. I did not test it on safari, because it did not produce the result I wanted.

2. Adding hidden inputs

Some people have said, that if you put hidden fields with display: none as style and add the names: name="firstName" etc. It will autocomplete those, and not your main fields. However this has not worked for me.

3. Changing the type of the input to 'Search'

Changing the attr type="search" of the input element worked in chrome and firefox. It added a little x at the end of the input, so you can 'clean' your search. autoComplete="off" must be added to every field. This did not work on safari.

4. Adding different values to autoComplete

the autoComplete attribute expects a string to be passed, that means it can be "off","none","nope","new_input_64". It worked some of the time on chorme, so I did not bother testing it on safari. edit: it does not work.

5. Changing label names to some gibberish

Some people have posted as answers, that safari also reads the label names, so I changed those as well, but to no avail

MY Solution:

After banging my head the whole day, an idea came. What if I change all the inputs to text areas... So i did. First i changed the inputs to textareas and added a rows={1} so it has only one row. Then i added the following styling

 textarea {
  resize: none;
  overflow-x: scroll;
  white-space: nowrap;
}

.no-scroll::-webkit-scrollbar,
.no-scroll::-webkit-scrollbar-track-piece {
  width: 0px;
}
.no-scroll::-webkit-scrollbar-track {
  background-color: transparent;
  border-radius: 0px;
}

.no-scroll::-webkit-scrollbar-thumb {
  border-radius: 0px;
  border: 0px solid transparent;
  background-clip: content-box;
  background-color: transparent;
  width: 0px;
}

And to make so that the user cant use return to add new lines, i added this to the top of my component.

 useEffect(() => {
    var textArea = document.getElementsByTagName('textarea')[0] //your desired TextArea
    textArea.onkeydown = function (e) {
      if (e.keyCode == 13) {
        e.preventDefault()
      }
    }
  }, [])

And now, finally, safari does not autocomplete my fields.

Important Note*

I used normal inputs (without react-hook-forms) and adding only autoComplete="off" to the fields worked. But since i added react-hook-forms to manage state properly and have the error functionallity, the solution no longer worked. So hey, if you have as specific case as mine, please share if that worked out for you in the comments.