Merge pull request #21109 from johanrd/fix/19219

[BUGFIX] Fix missing value attribute on radio/checkbox inputs bound to empty string

Author: NullVoxPopuli

packages/@ember/-internals/glimmer/tests/integration/input-test.js

@@ -201,6 +201,30 @@ moduleFor(
       this.assertValue('hola', 'Value is used');
     }
 
+    ['@test GH19219 input[type=radio] value attribute is rendered when bound to empty string']() {
+      this.render(`<input type="radio" value={{this.value}}>`, { value: '' });
+
+      this.assert.strictEqual(
+        this.inputElement().getAttribute('value'),
+        '',
+        'value attribute is present and empty on initial render'
+      );
+      this.assertPropertyHasValue('value', '', 'value property is empty string on initial render');
+
+      runTask(() => this.rerender());
+
+      this.assert.strictEqual(
+        this.inputElement().getAttribute('value'),
+        '',
+        'value attribute is present after no-op rerender'
+      );
+      this.assertPropertyHasValue(
+        'value',
+        '',
+        'value property is empty string after no-op rerender'
+      );
+    }
+
     ['@test GH18211 input checked attribute, without a value, works with attributes with values']() {
       this.render(`<input type="checkbox" checked>`, {});
       this.assertPropertyHasValue('checked', true);

packages/@glimmer/runtime/lib/vm/attributes/dynamic.ts

@@ -178,7 +178,15 @@ export class SafeDynamicAttribute extends SimpleDynamicAttribute {
 
 export class InputValueDynamicAttribute extends DefaultDynamicProperty {
   override set(dom: TreeBuilder, value: unknown) {
-    dom.__setProperty('value', normalizeStringValue(value));
+    const normalized = normalizeStringValue(value);
+    dom.__setProperty('value', normalized);
+
+    // GH#19219: Browsers don't reflect `input.value = ''` as a value attribute when
+    // type is later changed to "radio"/"checkbox". Explicitly set the attribute for <input>.
+    // Not needed for <textarea> (no value attribute).
+    if (value === '' && this.attribute.element.tagName === 'INPUT') {
+      dom.__setAttribute('value', '', null);
+    }
   }
 
   override update(value: unknown) {