Merge pull request #7232 from QwikDev/v2-set-correct-v-current

fix: set correct vCurrent after moving the found node
QwikDev · Jan 10, 2025 · f3404ff · f3404ff
2 parents 86ecc64 + b5c6f34
commit f3404ff
Show file tree

Hide file tree

Showing 2 changed files with 112 additions and 0 deletions.
diff --git a/packages/qwik/src/core/client/vnode-diff.ts b/packages/qwik/src/core/client/vnode-diff.ts
@@ -724,6 +724,14 @@ export const vnode_diff = (
       } else {
         // Existing keyed node
         vnode_insertBefore(journal, vParent as ElementVNode, vNewNode, vCurrent);
+        // We are here, so jsx is different from the vCurrent, so now we want to point to the moved node.
+        vCurrent = vNewNode;
+        // We need to clean up the vNewNode, because we don't want to skip advance to next sibling (see `advance` function).
+        vNewNode = null;
+        // We need also to go back to the previous sibling, because we assigned previous sibling to the vCurrent.
+        if (vSiblings !== null) {
+          vSiblingsIdx -= SiblingsArray.Size;
+        }
       }
     }
     // reconcile attributes

diff --git a/packages/qwik/src/core/tests/component.spec.tsx b/packages/qwik/src/core/tests/component.spec.tsx
@@ -1713,6 +1713,110 @@ describe.each([
     );
   });
 
+  it('should correctly move to next sibling during inserting a new component instance after rerender', async () => {
+    const Child = component$(() => {
+      return <div></div>;
+    });
+
+    const Parent = component$(() => {
+      const store = useStore<{ message?: string }>({
+        message: undefined,
+      });
+      return (
+        <div id="test">
+          <button
+            onClick$={() => {
+              if (store.message) {
+                store.message = undefined;
+              } else {
+                store.message = 'Hello';
+              }
+            }}
+          ></button>
+          <section key={store.message}>
+            <Slot />
+          </section>
+        </div>
+      );
+    });
+
+    const Cmp = component$(() => {
+      return (
+        <>
+          <Slot />
+        </>
+      );
+    });
+
+    const Cmp2 = component$(() => {
+      const counter = useSignal(0);
+      return (
+        <>
+          <Cmp key={counter.value}>
+            <Parent>
+              <Child />
+            </Parent>
+          </Cmp>
+          <button id="counter" onClick$={() => counter.value++}></button>
+        </>
+      );
+    });
+
+    const { vNode, document } = await render(<Cmp2 />, { debug });
+
+    expect(vNode).toMatchVDOM(
+      <Component ssr-required>
+        <Fragment ssr-required>
+          <Component ssr-required>
+            <Fragment ssr-required>
+              <Projection ssr-required>
+                <Component ssr-required>
+                  <div id="test">
+                    <button></button>
+                    <section>
+                      <Projection ssr-required>
+                        <Component ssr-required>
+                          <div></div>
+                        </Component>
+                      </Projection>
+                    </section>
+                  </div>
+                </Component>
+              </Projection>
+            </Fragment>
+          </Component>
+          <button id="counter"></button>
+        </Fragment>
+      </Component>
+    );
+    await trigger(document.body, '#counter', 'click');
+    expect(vNode).toMatchVDOM(
+      <Component ssr-required>
+        <Fragment ssr-required>
+          <Component ssr-required>
+            <Fragment ssr-required>
+              <Projection ssr-required>
+                <Component ssr-required>
+                  <div id="test">
+                    <button></button>
+                    <section>
+                      <Projection ssr-required>
+                        <Component ssr-required>
+                          <div></div>
+                        </Component>
+                      </Projection>
+                    </section>
+                  </div>
+                </Component>
+              </Projection>
+            </Fragment>
+          </Component>
+          <button id="counter"></button>
+        </Fragment>
+      </Component>
+    );
+  });
+
   describe('regression', () => {
     it('#3643', async () => {
       const Issue3643 = component$(() => {