Merge pull request #7740 from QwikDev/v2-innerhtml-after-ssr

fix: preserve innerHTML after component rerender

Author: wmertens

.changeset/ninety-crabs-lay.md

@@ -0,0 +1,5 @@
+---
+'@qwik.dev/core': patch
+---
+
+fix: preserve innerHTML after component rerender

packages/qwik/src/core/shared/shared-serialization.ts

@@ -4,8 +4,14 @@ import type { StreamWriter } from '../../server/types';
 import { VNodeDataFlag } from '../../server/types';
 import type { VNodeData } from '../../server/vnode-data';
 import { type DomContainer } from '../client/dom-container';
-import type { VNode } from '../client/types';
-import { vnode_getNode, vnode_isVNode, vnode_locate, vnode_toString } from '../client/vnode';
+import type { ElementVNode, VNode } from '../client/types';
+import {
+  ensureMaterialized,
+  vnode_getNode,
+  vnode_isVNode,
+  vnode_locate,
+  vnode_toString,
+} from '../client/vnode';
 import { isSerializerObj } from '../reactive-primitives/utils';
 import type { AsyncComputeQRL, SerializerArg } from '../reactive-primitives/types';
 import {
@@ -579,6 +585,32 @@ const allocate = (container: DeserializeContainer, typeId: number, value: unknow
     case TypeIds.RefVNode:
       const vNode = retrieveVNodeOrDocument(container, value);
       if (vnode_isVNode(vNode)) {
+        /**
+         * If we have a ref, we need to ensure the element is materialized.
+         *
+         * Example:
+         *
+         * ```
+         * const Cmp = component$(() => {
+         *       const element = useSignal<HTMLDivElement>();
+         *
+         *       useVisibleTask$(() => {
+         *         element.value!.innerHTML = 'I am the innerHTML content!';
+         *       });
+         *
+         *       return (
+         *          <div ref={element} />
+         *       );
+         * });
+         * ```
+         *
+         * If we don't materialize early element with ref property, and change element innerHTML it
+         * will be applied to a vnode tree during the lazy materialization, and it is wrong.
+         *
+         * Next if we rerender component it will remove applied innerHTML, because the system thinks
+         * it is a part of the vnode tree.
+         */
+        ensureMaterialized(vNode as ElementVNode);
         return vnode_getNode(vNode);
       } else {
         throw qError(QError.serializeErrorExpectedVNode, [typeof vNode]);

packages/qwik/src/core/tests/component.spec.tsx

@@ -2331,6 +2331,40 @@ describe.each([
     (globalThis as any).logs = undefined;
   });
 
+  it('should early materialize element with ref property', async () => {
+    const Cmp = component$(() => {
+      const element = useSignal<HTMLDivElement>();
+      const listToForceReRender = useSignal([]);
+
+      useVisibleTask$(() => {
+        element.value!.innerHTML = 'I am the innerHTML content!';
+      });
+
+      return (
+        <div>
+          <div ref={element} />
+          <button
+            onClick$={() => {
+              listToForceReRender.value = [];
+            }}
+          >
+            Render
+          </button>
+          {listToForceReRender.value.map(() => (
+            <div />
+          ))}
+        </div>
+      );
+    });
+
+    const { document } = await render(<Cmp />, { debug });
+    if (render === ssrRenderToDom) {
+      await trigger(document.body, 'div', 'qvisible');
+    }
+    await trigger(document.body, 'button', 'click');
+    expect(document.body.innerHTML).toContain('I am the innerHTML content!');
+  });
+
   describe('regression', () => {
     it('#3643', async () => {
       const Issue3643 = component$(() => {