Vue 3 is ignoring autocorrect="off" on input fields for iOS Chrome

[ejg]

Version

3.2.32

Reproduction link

sfc.vuejs.org/

Steps to reproduce

iPad - iOS 15.3.1 / Chrome - v100.0

In the input field, type a misspelled word with a space at the end, i.e. "ded ".

What is expected?

The word is not changed.

What is actually happening?

The word "ded" is autocorrected to "Dec".

---

Works correctly:

-- in iOS Safari

-- with Vue 2 - https://codepen.io/ejg/pen/popOJWo

-- Android v12

You will have to switch up the misspelled word. Chrome will remember the misspelling and not correct it when entered multiple times.

[LinusBorg]

Fascinating.

Can reproduce this on my iPad, switching the Vue version in the second codepen example. When using Vue 3, the keyboard is in composite mode and does an autocorrect.

As we don't really do anything to the input in either version of Vue, there must be some weird little difference that makes WebKit not like it. maybe we add the attributes in a different order, maybe something else.

[ejg]

Here's a pen with only the autocorrect attribute: https://codepen.io/ejg/pen/QWaVwvm

It also happens in iOS Firefox, Edge, and Bluefy so it is definitely a base WebKit/Vue3 problem.

[LinusBorg]

Interesting. Personally I have zero ideas why that might happen. We literally don't do anything except set that attribute.

[ejg]

I opened a bug report against WebKit maybe they can tell what is going on.
https://bugs.webkit.org/show_bug.cgi?id=239383

[tony19]

I think this is a known problem with Webkit. Globally disabling iOS's keyboard autocorrection seems to be the only way to workaround the issue (I verified this on the simulator).

[tony19]

The WebKit team closed the issue as not reproducible. Are you still seeing the issue?

[ejg]

Yes. I can still reproduce on iOS 15.6/Chrome v103 using the vue reproduction link above, the codepen https://codepen.io/ejg/pen/QWaVwvm , and my website.

[dili021]

I am experiencing this issue as well. Happenning with both webpack & vite. I've found it only happens when the attributes are declared in a .vue file. I've tried creating an input.html with contents:

   <!-- non-predictive -->
    <input
      type="search"
      autocapitalize="off"
      autocorrect="off"
      spellcheck="false"
    />
    <!-- predictive -->
    <input type="search"/>

and using it in a vue file with <iframe/> and this way it works as expected.

[jasonhibbs]

Also seeing this in Mobile Safari + Vue 3 (Nuxt 3), cannot reproduce in vanilla HTML/JS.

I’ve resorted to setting the attribute again on mount:

Array.from(document.querySelectorAll('input[autocorrect]')).forEach(el => {
  el.setAttribute('autocorrect', 'off')
})

[ejg]

Another data point--the input works correctly in Nuxt 3.

[qzd1989]

I am experiencing this issue as well. Happenning with both webpack & vite. I've found it only happens when the attributes are declared in a .vue file. I've tried creating an input.html with contents:

   <!-- non-predictive -->
    <input
      type="search"
      autocapitalize="off"
      autocorrect="off"
      spellcheck="false"
    />
    <!-- predictive -->
    <input type="search"/>

and using it in a vue file with <iframe/> and this way it works as expected.

thank you sir! it is working!

       <el-input
          v-model="keywords"
          autocapitalize="off"
          autocorrect="off"
          spellcheck="false"
        />

[Ecco]

Hit this very same issue. vue 3.5.13. iOS 18.1.1.

Actually I did some digging and the problem is that for some reason, on WebKit, the autocorrect="off" attributes from a .vue file becomes autocorrect="on".

This buggy behavior is also present on desktop Safari on macOS too, but AFAIK it has no impact (since there is no on-screen keyboard).

Screenshot below shows .vue component in VSCode to the left and Safari's web inspector to the right. Crazy 😄

[Ecco]

Ok, so I did track and pinpoint the difference! Safari disagrees with Chrome and Firefox on this:

"autocorrect" in document.createElement("input")

This make shouldSetAsProp, return true instead of false, which in turns makes patchProp perform a call to patchDOMProp instead of patchAttr.

[Ecco]

Link to WebKit bug report. That doesn't mean there's nothing to patch on Vue's side though as my report on WebKit's end is merely that it doesn't behave like Chrome and Firefox, which might absolutely be fine (I have no idea what the spec says, and if the specs even covers that).

[brentfulgham]

Firefox 136 (the latest release) now matches Safari behavior. I would anticipate Chrome moving to match soon, so it would be good to adjust Vue.js to expect this standards-compliant behavior.

[Ecco]

Thanks for the very insightful feedback @brentfulgham ! Since WebKit is leading the way (yay!), I tried to come up with a patch for Vue 😄

[rkh]

Any workaround in the mean time? I'm not sure I fully grasp what's happening. It seems like setting autocorrect to false instead of off works, but unfortunately we're using code (Reka UI) that has a hard-coded "off" in there.

[jasonhibbs]

My workaround above, reset the input in onMounted:

I’ve resorted to setting the attribute again on mount:

Array.from(document.querySelectorAll('input[autocorrect]')).forEach(el => {
  el.setAttribute('autocorrect', 'off')
})

[rkh]

My workaround above, reset the input in onMounted:

I’ve resorted to setting the attribute again on mount:

Array.from(document.querySelectorAll('input[autocorrect]')).forEach(el => {
  el.setAttribute('autocorrect', 'off')
})

Right, thanks. I have a component wrapping input elements, can put that there.

My other thought was to do this outside Vue, set data-autocorrect and use a mutation observer, but that was when I assumed this was caused by a browser extension (I suddenly had Grammarly pop up for many of my input fields).