-
-
Notifications
You must be signed in to change notification settings - Fork 4.5k
Spread operator doesn't work with "form" and "list" attributes #3681
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Comments
This looks like another manifestation for an overarching problem which might not actually have its own issue (just a few related open issues) - namely, that we don't know whether each prop that's getting spread should be set as an attribute or as a property on the element. For non-spread props, we can look this stuff up at compile time, and just emit the correct code. I don't think we have a really good way to handle this for spread props (where this needs to be determined at runtime) without shipping a big list of properties vs attributes in the compiled code, which we'd really like to avoid doing. The helper we're using right now for this is: export function set_attributes(node: Element & ElementCSSInlineStyle, attributes: { [x: string]: string }) {
for (const key in attributes) {
if (key === 'style') {
node.style.cssText = attributes[key];
} else if (key in node) {
node[key] = attributes[key];
} else {
attr(node, key, attributes[key]);
}
}
} We set an attribute if one is available on the DOM object, otherwise we use an attribute. This breaks when it's a read-only property. It also doesn't handle when the property has a different name than the attribute, apart from the one special case of I recall it being suggested somewhere I can't find that one possibility would be to fall back to setting it as an attribute if |
A good idea from @pngwn: Check for |
Describe the bug
I'll try set
list
andform
with spread operator:It works in regular case:
But fails with spread operator:
Logs
Firefox:
setting getter-only property "form"
Chrome:
Cannot assign to read only property 'form' of object '#<HTMLInputElement>'
And if we remove "form" attribute:
Firefox:
setting getter-only property "list"
Chrome:
Cannot assign to read only property 'list' of object '#<HTMLInputElement>'
To Reproduce
REPL
The text was updated successfully, but these errors were encountered: