input spellcheck="false" does not work

[danyadev]

Version

3.0.0-beta.14

Reproduction link

https://jsfiddle.net/danyadev/qtgvsc57/1/

Steps to reproduce

Create a input and set the spellcheck="false" attribute to it

What is expected?

Spellcheck is turned off

What is actually happening?

If you look in DevTools, you will see spellchecker="true" there.

---

The example also created input outside the vue component, and there the spelling check is really turned off.

[pikax]

you need to cast your value to boolean, currently you are passing a string
:spellcheck="false"

That's the same behaviour as vue2

[posva]

this one should be changed because spellcheck is not a boolean attribute (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/spellcheck)

It does work properly on Vue 2 by leaving the value to false. The relevant code is at https://github.com/vuejs/vue/blob/dev/src/platforms/web/util/attrs.js#L20

[fredrivett]

This still seems to be an issue despite the fix merged on June 12th.

As I understand it, this should stop the spellchecker on iOS Safari:
<input spellcheck="false" />

Using the latest ("vue": "^3.0.3") with node_modules and yarn.lock deleted and reinstalled, this error persists.

I've tried all other variants in desperation too, yet spellcheck persists in them all:
<input :spellcheck="false" />
<input :spell-check="false" />
<input spellCheck="false" />
<input :spellCheck="false" />

I might be doing something silly, but if not then this is an outstanding issue and not fixed by 4492b88.

[posva]

The attribute is being set properly. You might need other attributes: https://stackoverflow.com/questions/254712/disable-spell-checking-on-html-textfields

[fredrivett]

Thanks so much for the swift reply here @posva.

I was actually looking at that SO post earlier today, and believe I've set everything correctly (though I may be being a dumbass).

My code above was a simplified example, my actual code that's not working is:

<input
  v-model.trim="computedInput"
  ref="inputRef"
  class="flex-1 bg-transparent border-0 shadow-none text-center mb-0 px-0 py-4 sm:py-6"
  placeholder="Search here&hellip;"
  autocomplete="off"
  autocorrect="off"
  autocapitalize="off"
  spellcheck="false"
  @focus="setFocussed(true)"
  @blur="setFocussed(false)"
/>

I would have expected the above to work, but it's still autocorrecting for me with "vue": "^3.0.3".