[ssr]: Spreading `readOnly: false` on input applies `readonly`

[segunadebayo]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

Current behavior 😯

During SSR, spreading <input {...{ readOnly: false }} /> results in the underlying input getting the readonly property. Here's what it looks like:

<input readonly="false">

Expected behavior 🤔

I expect it to be the same as applying <input readOnly={false} /> which completely skips add readonly property

Steps to reproduce 🕹

Steps:

1. Visit https://stackblitz.com/edit/github-xfcetd?file=src%2Froutes%2Findex.tsx
2. Notice the use of spread readOnly: false
3. Try to edit the input that says "Not working"
4. See it's not editable

Context 🔦

No response

Your environment 🌎

No response

[atk]

{ readOnly: false } is generally handled wrong; as a workaround, add || undefined to your variable.

[ryansolid]

Is this a bug in Dom Expressions? Is readonly a Boolean Attribute being handled as a psuedo boolean?

EDIT: I see..It is a bug. It is because the SSR spreads only checks boolean attributes and not the properties list and the camelCase version is under properties.. It is one of those places where we support both cases, but missed it in SSR. If you use the lowercase version readonly it will be fine in both cases. But this should be looked at in DOM Expressions. I'm going to move this to Solid core repo for more visibility.