fix: setting undefined as input value

Author: Varixo

.changeset/tough-plants-stay.md

@@ -0,0 +1,5 @@
+---
+'@qwik.dev/core': patch
+---
+
+fix: setting undefined as input value

packages/qwik/src/core/client/vnode-diff.ts

@@ -857,7 +857,7 @@ export const vnode_diff = (
     const setAttribute = (key: string, value: any, vHost: ElementVNode) => {
       vHost.setAttr(
         key,
-        value !== null ? serializeAttribute(key, value, scopedStyleIdPrefix) : null,
+        value != null ? serializeAttribute(key, value, scopedStyleIdPrefix) : null,
         journal
       );
     };

packages/qwik/src/core/client/vnode.ts

@@ -946,19 +946,18 @@ export const vnode_applyJournal = (journal: VNodeJournal) => {
           key = 'class';
         }
         const value = journal[idx++] as string | null | boolean;
+        const shouldRemove = value == null || value === false;
         if (isBooleanAttr(element, key)) {
           (element as any)[key] = parseBoolean(value);
-        } else if (key === 'value' && key in element) {
-          (element as any).value = String(value);
         } else if (key === dangerouslySetInnerHTML) {
           (element as any).innerHTML = value!;
           element.setAttribute(QContainerAttr, QContainerValue.HTML);
+        } else if (shouldRemove) {
+          element.removeAttribute(key);
+        } else if (key === 'value' && key in element) {
+          (element as any).value = String(value);
         } else {
-          if (value == null || value === false) {
-            element.removeAttribute(key);
-          } else {
-            element.setAttribute(key, String(value));
-          }
+          element.setAttribute(key, String(value));
         }
         break;
       case VNodeJournalOpCode.HoistStyles:

packages/qwik/src/core/tests/component.spec.tsx

@@ -2756,6 +2756,61 @@ describe.each([
     expect(propsProxy[_PROPS_HANDLER]?.$effects$?.size).toBe(0);
   });
 
+  it('should correctly set undefined value', async () => {
+    const Cmp = component$(() => {
+      const someValue = useSignal<string | undefined>(undefined);
+      return (
+        <div>
+          <input value={someValue.value} />
+
+          <button
+            id="foo"
+            onClick$={() => {
+              someValue.value = 'foo';
+            }}
+          ></button>
+          <button
+            id="undefined"
+            onClick$={() => {
+              someValue.value = undefined;
+            }}
+          ></button>
+        </div>
+      );
+    });
+
+    const { vNode, document } = await render(<Cmp />, { debug });
+    expect(vNode).toMatchVDOM(
+      <Component>
+        <div>
+          <input value={undefined} />
+          <button id="foo"></button>
+          <button id="undefined"></button>
+        </div>
+      </Component>
+    );
+    await trigger(document.body, 'button#foo', 'click');
+    expect(vNode).toMatchVDOM(
+      <Component>
+        <div>
+          <input value="foo" />
+          <button id="foo"></button>
+          <button id="undefined"></button>
+        </div>
+      </Component>
+    );
+    await trigger(document.body, 'button#undefined', 'click');
+    expect(vNode).toMatchVDOM(
+      <Component>
+        <div>
+          <input value={undefined} />
+          <button id="foo"></button>
+          <button id="undefined"></button>
+        </div>
+      </Component>
+    );
+  });
+
   describe('regression', () => {
     it('#3643', async () => {
       const Issue3643 = component$(() => {