Some attributes have to be set by attribute and not by DOM
LeviSchuck opened this issue · 3 comments
Well, this was a funky roadblock.
Apparently the list
attribute on input
elements is read only, and has to be set by element attribute instead.
Similar can be found on aurelia/framework#646 (comment)
The sample in https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist has been modified to be compatible with the moon compiler.
You can reproduce this in the playground with
const Demo = ({ data }) => (
<div>
<h1>Demo</h1>
<input list="ice-cream-flavors" id="ice-cream-choice" name="ice-cream-choice" />
<datalist id="ice-cream-flavors">
<option value="Chocolate" />
<option value="Coconut" />
<option value="Mint" />
<option value="Strawberry" />
<option value="Vanilla"/>
</datalist>
</div>
);
Moon.use({
view: Moon.view.driver("#root")
});
Moon.run(() => ({
view: (<Demo />)
}));
It fails on
} else {
// Set a DOM property.
element[key] = value;
}
Seems hacky.. but may I recommend attr-<key>=value
as a workaround pattern?
That would keep the code size small and not have a ever expanding whitelist of offending tags and attributes. Then it would be element.setAttribute(key.replace(/^attr-/, ''), value)
maybe
This is interesting! I've tried looking into finding attributes that can't be set with DOM properties, but I didn't come across any.
I'm not sure what the ideal workaround is. Maybe something like attr-<key>
, but I would like to avoid adding another check in the logic for creating, updating, and removing properties for super specific attributes. I'll also consider something like ref
to give access to the DOM node so that you can do whatever you wish with it.
I added a new property type that allows you to set attributes like this:
<input attributes={
list: "ice-cream-flavors"
}/>
Note that this uses a new syntax that allows any literal in attribute values. These should be coming in the next beta (which should hopefully be the last one).
attributes
was added in Moon v1 beta 5