From 08cb7c4b0ba50bc914cf52a80ba2711c7dacd81b Mon Sep 17 00:00:00 2001
From: Varixo <admin@varixo.pl>
Date: Mon, 30 Dec 2024 09:55:24 +0100
Subject: [PATCH] fix: moving existing virtual node during vnode diffing

---
 .changeset/funny-apricots-learn.md            |   5 +
 packages/qwik/src/core/client/vnode-diff.ts   |   2 +-
 .../qwik/src/core/tests/component.spec.tsx    | 176 ++++++++++++++++++
 3 files changed, 182 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/funny-apricots-learn.md

diff --git a/.changeset/funny-apricots-learn.md b/.changeset/funny-apricots-learn.md
new file mode 100644
index 00000000000..4fb9c305ffb
--- /dev/null
+++ 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
index 5bde3ab76ab..d4685e1fcbd 100644
--- 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
index 5e210c93c4b..22672a8cd17 100644
--- 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>
+      );
+    });
   });
 });