diff --git a/src/compiler/compile/render_dom/wrappers/Element/Attribute.ts b/src/compiler/compile/render_dom/wrappers/Element/Attribute.ts index ecddaaebaa..85f252f57e 100644 --- a/src/compiler/compile/render_dom/wrappers/Element/Attribute.ts +++ b/src/compiler/compile/render_dom/wrappers/Element/Attribute.ts @@ -39,20 +39,25 @@ export default class AttributeWrapper { } } - render(block: Block) { + is_indirectly_bound_value() { const element = this.parent; const name = fix_attribute_casing(this.node.name); - - const metadata = this.get_metadata(); - - const is_indirectly_bound_value = - name === 'value' && + return name === 'value' && (element.node.name === 'option' || // TODO check it's actually bound (element.node.name === 'input' && - element.node.bindings.find( + element.node.bindings.some( (binding) => /checked|group/.test(binding.name) ))); + } + + render(block: Block) { + const element = this.parent; + const name = fix_attribute_casing(this.node.name); + + const metadata = this.get_metadata(); + + const is_indirectly_bound_value = this.is_indirectly_bound_value(); const property_name = is_indirectly_bound_value ? '__value' diff --git a/src/compiler/compile/render_dom/wrappers/Element/index.ts b/src/compiler/compile/render_dom/wrappers/Element/index.ts index 8894308fdf..9291f329b6 100644 --- a/src/compiler/compile/render_dom/wrappers/Element/index.ts +++ b/src/compiler/compile/render_dom/wrappers/Element/index.ts @@ -679,10 +679,10 @@ export default class ElementWrapper extends Wrapper { updates.push(condition ? x`${condition} && ${snippet}` : snippet); } else { const metadata = attr.get_metadata(); - const snippet = x`{ ${ - (metadata && metadata.property_name) || - fix_attribute_casing(attr.node.name) - }: ${attr.get_value(block)} }`; + const name = attr.is_indirectly_bound_value() + ? '__value' + : (metadata && metadata.property_name) || fix_attribute_casing(attr.node.name); + const snippet = x`{ ${name}: ${attr.get_value(block)} }`; initial_props.push(snippet); updates.push(condition ? x`${condition} && ${snippet}` : snippet); diff --git a/src/runtime/internal/dom.ts b/src/runtime/internal/dom.ts index 5a165136ce..9ab9a4395f 100644 --- a/src/runtime/internal/dom.ts +++ b/src/runtime/internal/dom.ts @@ -98,7 +98,7 @@ export function set_attributes(node: Element & ElementCSSInlineStyle, attributes node.removeAttribute(key); } else if (key === 'style') { node.style.cssText = attributes[key]; - } else if (descriptors[key] && descriptors[key].set) { + } else if (key === '__value' || descriptors[key] && descriptors[key].set) { node[key] = attributes[key]; } else { attr(node, key, attributes[key]);