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

[ejg]

trafficstars

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.