Merge pull request #7208 from QwikDev/v2-fix-moving-found-vnode

fix: moving existing virtual node during vnode diffing
QwikDev · Dec 31, 2024 · 0bc9555 · 0bc9555
2 parents c029c32 + 08cb7c4
commit 0bc9555
Show file tree

Hide file tree

Showing 3 changed files with 182 additions and 1 deletion.
diff --git a/.changeset/funny-apricots-learn.md b/.changeset/funny-apricots-learn.md
@@ -0,0 +1,5 @@
+---
+'@qwik.dev/core': patch
+---
+
+fix: moving existing virtual node during vnode diffing
diff --git a/packages/qwik/src/core/client/vnode-diff.ts b/packages/qwik/src/core/client/vnode-diff.ts
@@ -984,7 +984,7 @@ export const vnode_diff = (
         vnode_insertBefore(
           journal,
           vParent as VirtualVNode,
-          (vNewNode = vnode_newVirtual()),
+          vNewNode,
           vCurrent && getInsertBefore()
         );
         return;

diff --git a/packages/qwik/src/core/tests/component.spec.tsx b/packages/qwik/src/core/tests/component.spec.tsx
@@ -1949,5 +1949,181 @@ describe.each([
         </Component>
       );
     });
+
+    it('#7203 - should correctly move found vnode', async () => {
+      const Cmp = component$(() => {
+        const type = useSignal<'A' | 'B' | 'C'>('B');
+
+        return (
+          <>
+            <div>
+              <button
+                id="A"
+                type="button"
+                onClick$={$(() => {
+                  type.value = 'A';
+                })}
+              >
+                Select A
+              </button>
+
+              <button
+                id="B"
+                type="button"
+                onClick$={$(() => {
+                  type.value = 'B';
+                })}
+              >
+                Select B
+              </button>
+
+              <button
+                id="C"
+                type="button"
+                onClick$={$(() => {
+                  type.value = 'C';
+                })}
+              >
+                Select C
+              </button>
+            </div>
+
+            {type.value === 'A' ? (
+              <>
+                <p>A</p>
+              </>
+            ) : undefined}
+
+            {type.value === 'B' ? (
+              <>
+                <p>B</p>
+              </>
+            ) : undefined}
+
+            {type.value === 'C' ? (
+              <>
+                <p>C</p>
+              </>
+            ) : undefined}
+
+            {type.value !== 'C' ? (
+              <>
+                <p>A or B</p>
+              </>
+            ) : undefined}
+          </>
+        );
+      });
+
+      const { vNode, document } = await render(<Cmp />, { debug });
+
+      expect(vNode).toMatchVDOM(
+        <Component ssr-required>
+          <Fragment ssr-required>
+            <div>
+              <button id="A" type="button">
+                Select A
+              </button>
+              <button id="B" type="button">
+                Select B
+              </button>
+              <button id="C" type="button">
+                Select C
+              </button>
+            </div>
+            {''}
+            <Fragment ssr-required>
+              <p>B</p>
+            </Fragment>
+            {''}
+            <Fragment ssr-required>
+              <p>A or B</p>
+            </Fragment>
+          </Fragment>
+        </Component>
+      );
+
+      await trigger(document.body, '#A', 'click');
+
+      expect(vNode).toMatchVDOM(
+        <Component ssr-required>
+          <Fragment ssr-required>
+            <div>
+              <button id="A" type="button">
+                Select A
+              </button>
+              <button id="B" type="button">
+                Select B
+              </button>
+              <button id="C" type="button">
+                Select C
+              </button>
+            </div>
+            <Fragment ssr-required>
+              <p>A</p>
+            </Fragment>
+            {''}
+            {''}
+            <Fragment ssr-required>
+              <p>A or B</p>
+            </Fragment>
+          </Fragment>
+        </Component>
+      );
+
+      await trigger(document.body, '#C', 'click');
+
+      expect(vNode).toMatchVDOM(
+        <Component ssr-required>
+          <Fragment ssr-required>
+            <div>
+              <button id="A" type="button">
+                Select A
+              </button>
+              <button id="B" type="button">
+                Select B
+              </button>
+              <button id="C" type="button">
+                Select C
+              </button>
+            </div>
+            {''}
+            {''}
+            <Fragment ssr-required>
+              <p>C</p>
+            </Fragment>
+            {''}
+          </Fragment>
+        </Component>
+      );
+
+      await trigger(document.body, '#B', 'click');
+
+      expect(vNode).toMatchVDOM(
+        <Component ssr-required>
+          <Fragment ssr-required>
+            <div>
+              <button id="A" type="button">
+                Select A
+              </button>
+              <button id="B" type="button">
+                Select B
+              </button>
+              <button id="C" type="button">
+                Select C
+              </button>
+            </div>
+            {''}
+            <Fragment ssr-required>
+              <p>B</p>
+            </Fragment>
+            {''}
+            <Fragment ssr-required>
+              <p>A or B</p>
+            </Fragment>
+          </Fragment>
+        </Component>
+      );
+    });
   });
 });