289197 2025-03-05 15:04:05 -0800 Supporting HTMLInputElement's autocorrect attribute causes issues for Vue.js 2025-03-05 18:04:49 -0800 1 1 1 Unclassified WebKit Forms WebKit Nightly Build Unspecified Unspecified RESOLVED INVALID P2 Normal --- 1 r.goyet webkit-unassigned akeerthi bfulgham cdumez karlcow wenson_hsieh oldest_to_newest 2100758 0 r.goyet 2025-03-05 15:04:05 -0800 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 2100761 1 r.goyet 2025-03-05 15:25:09 -0800 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 2100791 2 ap 2025-03-05 16:38:53 -0800 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. 2100802 3 bfulgham 2025-03-05 17:01:36 -0800 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. 2100833 4 karlcow 2025-03-05 18:04:49 -0800 https://wpt.fyi/results/html/editing/editing-0/autocorrection/autocorrection.html?label=master&label=experimental&aligned&q=autocorrect 2100836 5 r.goyet 2025-03-05 18:19:47 -0800 Wow, thanks for the super quick answer guys! Feel free to close this bug report then! 2100837 6 r.goyet 2025-03-05 18:20:52 -0800 Thanks for the super quick and insightful feedback!