fix: reorder children issue (QwikDev#3732)

fixes QwikDev#3731
Austionian · Apr 9, 2023 · 9f0fa41 · 9f0fa41
1 parent d243294
commit 9f0fa41
Show file tree

Hide file tree

Showing 3 changed files with 67 additions and 2 deletions.
diff --git a/packages/qwik/src/core/render/dom/visitor.ts b/packages/qwik/src/core/render/dom/visitor.ts
@@ -1110,9 +1110,9 @@ export const directInsertAfter = (
   ref: Node | VirtualElement | null
 ) => {
   if (isVirtualElement(child)) {
-    child.insertBeforeTo(parent, getRootNode(ref)?.nextSibling);
+    child.insertBeforeTo(parent, ref?.nextSibling ?? null);
   } else {
-    parent.insertBefore(child, getRootNode(ref)?.nextSibling);
+    parent.insertBefore(child, ref?.nextSibling ?? null);
   }
 };
 

diff --git a/starters/apps/e2e/src/components/render/render.tsx b/starters/apps/e2e/src/components/render/render.tsx
@@ -82,6 +82,7 @@ export const RenderChildren = component$(() => {
       <Issue3542 atom={{ code: 1 }} />
       <Issue3643 />
       <IssueChildrenSpread />
+      <Issue3731 />
     </>
   );
 });
@@ -659,3 +660,39 @@ export const IssueChildrenSpread = component$(() => {
     </div>
   );
 });
+
+const states = [
+  ['think', 'containers', 'hydrating', 'usestylesscoped', 'slots'],
+  ['think', 'containers', 'cleanup', 'usevisibletask', 'hydrating'],
+  ['cleanup', 'usevisibletask', 'think', 'containers', 'slots'],
+];
+
+export const Issue3731 = component$(() => {
+  const state = useSignal(0);
+  const signal = useSignal(states[0]);
+  return (
+    <div>
+      <button
+        id="issue-3731-button"
+        onClick$={() => {
+          state.value++;
+          if (state.value > states.length - 1) {
+            state.value = 0;
+          }
+          signal.value = states[state.value];
+        }}
+      >
+        Change
+      </button>
+      <ul>
+        {signal.value.map((item) => {
+          return <Issue3731Child key={item} value={item}></Issue3731Child>;
+        })}
+      </ul>
+    </div>
+  );
+});
+
+export const Issue3731Child = component$((props: any) => {
+  return <div class="issue-3731-result">{props.value}</div>;
+});
diff --git a/starters/e2e/e2e.render.spec.ts b/starters/e2e/e2e.render.spec.ts
@@ -336,6 +336,34 @@ test.describe('render', () => {
       await button.click();
       await expect(result).toHaveText('Changed');
     });
+
+    test('issue3731', async ({ page }) => {
+      const button = page.locator('#issue-3731-button');
+      const results = page.locator('.issue-3731-result');
+      await expect(results).toHaveText([
+        'think',
+        'containers',
+        'hydrating',
+        'usestylesscoped',
+        'slots',
+      ]);
+      await button.click();
+      await expect(results).toHaveText([
+        'think',
+        'containers',
+        'cleanup',
+        'usevisibletask',
+        'hydrating',
+      ]);
+      await button.click();
+      await expect(results).toHaveText([
+        'cleanup',
+        'usevisibletask',
+        'think',
+        'containers',
+        'slots',
+      ]);
+    });
   }
 
   tests();