Disable Windows WebView autocompleting text fields "Saved data"

[adamhp]

Hey all, I'm curious if anyone knows of a way to disable Windows prompting autocompletes for random text fields?

These input fields are pretty basic, and don't have the autocomplete property.

<input
  id="title"
  name="body"
  className='...'
  type="text"
/>

[FabianLars]

and don't have the autocomplete property.

Genuine question: Any reason for that? Because adding autocomplete="off" is how you disable this 😅

[adamhp]

@FabianLars Definitely a front-end noob over here. I hadn't thought of that because I thought autocomplete only happened for other field types (password, etc.)... I'll give that a shot!

[Jose20025]

What about a form?
I have all inputs with autocomplete = "off" and still get the saved data.

       <form onSubmit={handleSubmit}>
          <div className='border-2 border-slate-500 rounded p-2'>
            <h2 className='text-xl font-medium'>Información Personal</h2>

            <div className='form-control w-full mt-2'>
              {image?.preview ? (
                <div className='avatar'>
                  <div className='mask mask-squircle size-[130px]'>
                    <img src={image.preview} alt='Imagen del empleado' />
                  </div>
                </div>
              ) : (
                employee.nombre &&
                employee.apellido && (
                  <div className='avatar placeholder'>
                    <div className='mask mask-squircle size-[130px] bg-neutral text-white'>
                      <span className='text-3xl'>
                        {employee.nombre[0]}
                        {employee.apellido[0]}
                      </span>
                    </div>
                  </div>
                )
              )}
              <label htmlFor='imagen' className='label w-fit'>
                <span className='label-text -mb-1'>Imagen</span>
              </label>
              <input
                type='file'
                id='imagen'
                onChange={handleImageChange}
                className='file-input file-input-bordered file-input-sm w-full max-w-md'
              />
            </div>

            <div className='flex gap-4'>
              <div className='form-control w-full'>
                <label htmlFor='nombre' className='label'>
                  <span className='label-text'>Nombre</span>
                </label>
                <input
                  type='text'
                  autoComplete='off'
                  id='nombre'
                  onChange={handleChange}
                  className='input input-bordered input-sm w-full max-w-md'
                />
              </div>
              <div className='form-control w-full'>
                <label htmlFor='apellido' className='label'>
                  <span className='label-text'>Apellido</span>
                </label>
                <input
                  type='text'
                  autoComplete='off'
                  id='apellido'
                  onChange={handleChange}
                  className='input input-bordered input-sm w-full max-w-md'
                />
              </div>
            </div>

            <div className='flex justify-between gap-4'>
              <div className='form-control w-full'>
                <label htmlFor='ci' className='label'>
                  <span className='label-text'>CI</span>
                </label>
                <input
                  type='text'
                  autoComplete='off'
                  id='ci'
                  className='input input-bordered input-sm w-full max-w-md'
                />
              </div>

              <div className='form-control w-full'>
                <label htmlFor='nacionalidad' className='label'>
                  <span className='label-text'>Nacionalidad</span>
                </label>
                <input
                  type='text'
                  autoComplete='off'
                  id='nacionalidad'
                  className='input input-bordered input-sm w-full max-w-md'
                />
              </div>
            </div>
          </div>
        </form>

[Megajin]

Hey guys, this is a major issue for me as well, but I have to clearify this is probably not an issue with Tauri.

Let me explain:

I am using react-hook-form , the content of these forms are dynamic. This dynamic data is customizeable by my users. On top of that I am using shadcn/ui.

Now, I have been trying to use autocomplete=off and many different approaches like using "nope" instead of off and so on. Nothing really worked consitently...
Sadly enough the Chromium Team decided they wont fix this issue: https://bugs.chromium.org/p/chromium/issues/detail?id=468153 which made me really mad because I want to have the control to decide if my form really needs an autocomplete option.

Anyway you can use JavaScript to disable the Autocomplete: https://stackoverflow.com/questions/12374442/chrome-ignores-autocomplete-off

However from time to time I get reports that the autocomplete option still appears... really annoying.

[p0ryae]

I'm using Vite + Vue and using autocomplete = "off" fixes it for me. Weird.

[Megajin]

@p0ryae , I did notice that autocomplete="new-passwword" worked on Ubuntu but not on Windows. The strange thing is, on Windows it only happens on some machines and some have the desired effect.

[FlippingBinary]

I had been omitting type="text" because it felt redundant, but using it in addition to autocomplete="off" seemed to be the missing piece for me.

[Megajin]

Alright everyone, I did find a consitent way of preventing autocomplete.
As I said in my case the whole form is dynamically generated.
So I have used on my react generated fields: autoComplete: 'one-time-code'.
This did the trick and the autocomplete dissapeared completely for now.

The project was generated with these versions:

 "@tauri-apps/cli": "^1.5.9",
 "@tauri-apps/api": "^1.5.1",