fix: add and remove var prop attribute

packages/docs/package.json

@@ -18,7 +18,7 @@
     "@mui/material": "5.16.4",
     "@mui/system": "5.16.4",
     "@mui/x-data-grid": "6.20.4",
-    "@qwik-ui/headless": "0.5.0",
+    "@qwik-ui/headless": "0.6.3",
     "@qwik.dev/core": "workspace:*",
     "@qwik.dev/react": "workspace:*",
     "@qwik.dev/router": "workspace:*",

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

@@ -848,23 +848,27 @@ export const vnode_diff = (
         if (dstKey && isHtmlAttributeAnEventName(dstKey)) {
           patchEventDispatch = true;
           dstIdx++;
-        } else if (dstKey) {
-          record(dstKey, null);
+        } else {
+          record(dstKey!, null);
           dstIdx--;
         }
         dstKey = dstIdx < dstLength ? dstAttrs[dstIdx++] : null;
       } else if (dstKey == null) {
         // Destination has more keys, so we need to insert them from source.
         const isEvent = isJsxPropertyAnEventName(srcKey);
-        if (srcKey && isEvent) {
+        if (isEvent) {
           // Special handling for events
           patchEventDispatch = true;
           recordJsxEvent(srcKey, srcAttrs[srcIdx]);
-        } else if (srcKey) {
-          record(srcKey, srcAttrs[srcIdx]);
+        } else {
+          record(srcKey!, srcAttrs[srcIdx]);
         }
         srcIdx++;
         srcKey = srcIdx < srcLength ? srcAttrs[srcIdx++] : null;
+        // we need to increment dstIdx too, because we added destination key and value to the VNode
+        // and dstAttrs is a reference to the VNode
+        dstIdx++;
+        dstKey = dstIdx < dstLength ? dstAttrs[dstIdx++] : null;
       } else if (srcKey == dstKey) {
         const srcValue = srcAttrs[srcIdx++];
         const dstValue = dstAttrs[dstIdx++];
@@ -892,11 +896,11 @@ export const vnode_diff = (
         dstKey = dstIdx < dstLength ? dstAttrs[dstIdx++] : null;
       } else {
         // Source is missing the key, so we need to remove it from destination.
-        if (dstKey && isHtmlAttributeAnEventName(dstKey)) {
+        if (isHtmlAttributeAnEventName(dstKey)) {
           patchEventDispatch = true;
           dstIdx++;
-        } else if (dstKey) {
-          record(dstKey, null);
+        } else {
+          record(dstKey!, null);
           dstIdx--;
         }
         dstKey = dstIdx < dstLength ? dstAttrs[dstIdx++] : null;

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

@@ -383,4 +383,58 @@ describe.each([
       </Component>
     );
   });
+
+  it('should add and remove var props on destination vnode', async () => {
+    const Tab = component$((props: any) => {
+      return <button {...props} onClick$={() => props.onClick$()}></button>;
+    });
+
+    const Wrapper = component$(() => {
+      const selected = useSignal(0);
+      return (
+        <>
+          <Tab
+            data-selected={selected.value === 0}
+            id="button-0"
+            onClick$={() => (selected.value = 0)}
+          />
+          <Tab
+            data-selected={selected.value === 1}
+            id="button-1"
+            onClick$={() => (selected.value = 1)}
+          />
+        </>
+      );
+    });
+
+    const { vNode, document } = await render(<Wrapper />, { debug });
+
+    expect(vNode).toMatchVDOM(
+      <Component ssr-required>
+        <Fragment ssr-required>
+          <Component ssr-required>
+            <button data-selected id="button-0"></button>
+          </Component>
+          <Component ssr-required>
+            <button id="button-1"></button>
+          </Component>
+        </Fragment>
+      </Component>
+    );
+
+    await trigger(document.body, 'button[id=button-1]', 'click');
+
+    expect(vNode).toMatchVDOM(
+      <Component ssr-required>
+        <Fragment ssr-required>
+          <Component ssr-required>
+            <button id="button-0"></button>
+          </Component>
+          <Component ssr-required>
+            <button data-selected id="button-1"></button>
+          </Component>
+        </Fragment>
+      </Component>
+    );
+  });
 });