Bug 289197 – Supporting HTMLInputElement's autocorrect attribute causes issues for Vue.js

• Status: RESOLVED
• Resolution: INVALID
• Component: Forms

In WebKit, the following snippet returns false. In Chrome and Firefox it returns true.

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

I don't know what browser's right (nor that it's even in the spec), but this does create compatibility problems.

See this page to see how it impacts Vue.js apps:

https://tinyurl.com/4n2ksv2b

If you inspect the generated <input> element in the right panel, you'll see it will have an autocorrect attribute set to "off" as desired on Chrome and Firefox. But on Safari, it yields a autocorrect="on" value, because of the aforementioned difference.

See also:
https://bugs.webkit.org/show_bug.cgi?id=239383
https://github.com/vuejs/core/issues/5705

I would argue that WebKit is being inconsistent here and should be patched. Indeed, on Firefox and Chrome we have the following:

"autocomplete" in document.createElement("input") == true
"autocorrect" in document.createElement("input") == false

Since these two tests give a different outcome, it makes sense to use a different approach to set the corresponding attributes:

const a = document.createElement("input");a["autocomplete"]="foobar";a.outerHTML == '<input autocomplete="foobar">'
const b = document.createElement("input");b.setAttribute("autocorrect", "foobar");b.outerHTML == '<input autocorrect="foobar">'

However, on Safari, we have

"autocomplete" in document.createElement("input") == true
"autocorrect" in document.createElement("input") == true

Since these tests give the same outcome, it makes sense to always use the [] operator to set the attribute. However

const a = document.createElement("input");a["autocomplete"]="foobar";a.outerHTML == '<input autocomplete="foobar">'

but

const c = document.createElement("input");c["autocorrect"]="foobar";c.outerHTML

will yield

'<input autocorrect="on">'

instead of the expected

'<input autocorrect="foobar">'

 == '<input autocomplete="foobar">'



and 

> const c = document.createElement("input");c["autocomplete"]="dzpeodz";c
< <input autocomplete="dzpeodz">
> const d = document.createElement("input");d["autocorrect"]="dzpeodz";d

[Alexey Proskuryakov]

The autocorrect attribute is in the standard, and Firefox has added support for it yesterday (in version 136). So Chrome is just behind on HTML spec support.

The behavior inconsistencies that you note stem from lack of support for this attribute in Chrome and in old Firefox. Because it's not supported, it's just treated as an expando.

It's quite unfortunate that there is an actual incompatibility with Vue.js for us here, but seems like updating the framework is the path forward. I'll ping some other folks for thoughts though.

[Brent Fulgham]

WebKit matches the standard (https://html.spec.whatwg.org/multipage/interaction.html#dom-autocorrect). It is specified as an enumerated attribute with only two states.

If you try your examples again in Firefox 136, you will get matching behavior to Safari.

I suspect Chrome will soon match this behavior, too.

[Karl Dubost]

https://wpt.fyi/results/html/editing/editing-0/autocorrection/autocorrection.html?label=master&label=experimental&aligned&q=autocorrect

Wow, thanks for the super quick answer guys! Feel free to close this bug report then!

Thanks for the super quick and insightful feedback!