Skip to content
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

Some attributes have to be set by attribute and not by DOM #255

Closed
LeviSchuck opened this issue Aug 23, 2019 · 3 comments
Closed

Some attributes have to be set by attribute and not by DOM #255

LeviSchuck opened this issue Aug 23, 2019 · 3 comments

Comments

@LeviSchuck
Copy link

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

@kbrsh
Copy link
Owner

kbrsh commented Aug 24, 2019

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.

@kbrsh
Copy link
Owner

kbrsh commented Dec 26, 2019

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).

@kbrsh
Copy link
Owner

kbrsh commented Jan 7, 2020

attributes was added in Moon v1 beta 5

@kbrsh kbrsh closed this as completed Jan 7, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants