diff --git a/packages/qwik/src/core/v2/client/vnode-diff.ts b/packages/qwik/src/core/v2/client/vnode-diff.ts index f29b593264f..db2f43f82fc 100644 --- a/packages/qwik/src/core/v2/client/vnode-diff.ts +++ b/packages/qwik/src/core/v2/client/vnode-diff.ts @@ -1046,8 +1046,8 @@ function propsDiffer(src: Record, dst: Record): boolea if (!src || !dst) { return true; } - let srcKeys = removeChildrenKey(Object.keys(src)); - let dstKeys = removeChildrenKey(Object.keys(dst)); + let srcKeys = Object.keys(src); + let dstKeys = Object.keys(dst); if (srcKeys.length !== dstKeys.length) { return true; } @@ -1063,14 +1063,6 @@ function propsDiffer(src: Record, dst: Record): boolea return false; } -function removeChildrenKey(keys: string[]): string[] { - const childrenIdx = keys.indexOf('children'); - if (childrenIdx !== -1) { - keys.splice(childrenIdx, 1); - } - return keys; -} - /** * If vnode is removed, it is necessary to release all subscriptions associated with it. * diff --git a/packages/qwik/src/core/v2/component.unit.tsx b/packages/qwik/src/core/v2/component.unit.tsx index 412a556f7d1..66e0d3db1e4 100644 --- a/packages/qwik/src/core/v2/component.unit.tsx +++ b/packages/qwik/src/core/v2/component.unit.tsx @@ -450,6 +450,95 @@ describe.each([ expect(document.querySelector('p')).toMatchDOM(

{'""'}

); }); + it('should rerender components with the same key and different props', async () => { + const Child = component$<{ value: number; active: boolean }>((props) => { + return ( +
+ Child {props.value}, active: {props.active ? 'true' : 'false'} +
+ ); + }); + + const Cmp = component$(() => { + const signal = useSignal(1); + + const children = [1, 2]; + + return ( +
+ + + + <> + {children.map((value) => { + return ; + })} + +
+ ); + }); + + const { vNode, document } = await render(, { debug }); + await trigger(document.body, '#button-2', 'click'); + expect(vNode).toMatchVDOM( + +
+ + + + +
+ {'Child '} + {'1'} + {', active: '} + {'false'} +
+
+ +
+ {'Child '} + {'2'} + {', active: '} + {'true'} +
+
+
+
+
+ ); + await trigger(document.body, '#button-1', 'click'); + expect(vNode).toMatchVDOM( + +
+ + + + +
+ {'Child '} + {'1'} + {', active: '} + {'true'} +
+
+ +
+ {'Child '} + {'2'} + {', active: '} + {'false'} +
+
+
+
+
+ ); + }); + describe('svg', () => { it('should render svg', async () => { const SvgComp = component$(() => { diff --git a/packages/qwik/src/core/v2/shared/component-execution.ts b/packages/qwik/src/core/v2/shared/component-execution.ts index 85ee9e9164e..c36326fd091 100644 --- a/packages/qwik/src/core/v2/shared/component-execution.ts +++ b/packages/qwik/src/core/v2/shared/component-execution.ts @@ -80,6 +80,7 @@ export const executeComponent2 = ( safeCall( () => { container.setHostProp(renderHost, SEQ_IDX_LOCAL, null); + container.setHostProp(renderHost, ELEMENT_PROPS, props); return componentFn(props); }, (jsx) => {