<textarea spellCheck={false} /> omits spellcheck attr (should be string "false")

[lionel-rowe]

Not sure whether this is a Fresh issue (@1.7.1) or upstream. [email protected] (latest) sort-of has the same issue, but only if you write the attr name all-lowercase in JSX, whereas Fresh has the issue even if you use camel-case (in non-island components) and only has the issue for spellCheck={false} for island components.

FWIW, TypeScript accepts both the lowercase and camel-case variants, so presumably both should be supported.

Non-island component in [email protected]

JSX	Expected	Actual	Match?
<textarea spellCheck={true} />	<textarea spellcheck="true"></textarea>	<textarea spellcheck></textarea>	❌
<textarea spellCheck={false} />	<textarea spellcheck="false"></textarea>	<textarea></textarea>	❌
<textarea spellcheck={true} />	<textarea spellcheck="true"></textarea>	<textarea spellcheck></textarea>	❌
<textarea spellcheck={false} />	<textarea spellcheck="false"></textarea>	<textarea></textarea>	❌

Island component in [email protected]

JSX	Expected	Actual	Match?
<textarea spellCheck={true} />	<textarea spellcheck="true"></textarea>	<textarea spellcheck="true"></textarea>	✅
<textarea spellCheck={false} />	<textarea spellcheck="false"></textarea>	<textarea></textarea>	❌
<textarea spellcheck={true} />	<textarea spellcheck="true"></textarea>	<textarea spellcheck="true"></textarea>	✅
<textarea spellcheck={false} />	<textarea spellcheck="false"></textarea>	<textarea spellcheck="false"></textarea>	✅

[email protected]

JSX	Expected	Actual	Match?
<textarea spellCheck={true} />	<textarea spellcheck="true"></textarea>	<textarea spellcheck="true"></textarea>	✅
<textarea spellCheck={false} />	<textarea spellcheck="false"></textarea>	<textarea spellcheck="false"></textarea>	✅
<textarea spellcheck={true} />	<textarea spellcheck="true"></textarea>	<textarea spellcheck></textarea>	❌
<textarea spellcheck={false} />	<textarea spellcheck="false"></textarea>	<textarea></textarea>	❌

[rschristian]

Relevant: preactjs/preact#3399 & preactjs/preact-render-to-string#388

I think we will remove the spellCheck typing altogether from Preact, it shouldn't be there. Should use lowercase.

Edit: Mixed up your examples, looks like a bug in RTS if spellcheck (lowercased) isn't properly supported. Will look into getting that corrected.

[rschristian]

Thanks for writing out the comparison, super helpful! Was indeed some funky inconsistencies in Preact.

preactjs/preact#4497 fixes the types, so spellCheck will be invalid/an error, and preactjs/preact-render-to-string#393 will ensure RTS handles spellcheck, the intended casing, properly.

[rschristian]

Try [email protected] when you have a chance, that + lower-cased spellcheck should fix your issues.