Merge pull request #7810 from QwikDev/v2-innerhtml-falsy-value

fix: handle falsy value for dangerouslySetInnerHTML

Author: wmertens

.changeset/tasty-turkeys-stand.md

@@ -0,0 +1,5 @@
+---
+'@qwik.dev/core': patch
+---
+
+fix: handle falsy value for dangerouslySetInnerHTML

packages/qwik/src/core/client/vnode-diff.ts

@@ -655,8 +655,10 @@ export const vnode_diff = (
         }
 
         if (key === dangerouslySetInnerHTML) {
-          element.innerHTML = value as string;
-          element.setAttribute(QContainerAttr, QContainerValue.HTML);
+          if (value) {
+            element.innerHTML = String(value);
+            element.setAttribute(QContainerAttr, QContainerValue.HTML);
+          }
           continue;
         }
 

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

@@ -641,6 +641,27 @@ describe.each([
     );
   });
 
+  it('should handle falsy values in dangerouslySetInnerHTML', async () => {
+    const Cmp = component$(() => {
+      return (
+        <main>
+          <div dangerouslySetInnerHTML={undefined}></div>
+          <div dangerouslySetInnerHTML={null!}></div>
+          {/* @ts-ignore-next-line */}
+          <div dangerouslySetInnerHTML={false}></div>
+        </main>
+      );
+    });
+    const { document } = await render(<Cmp />, { debug });
+    await expect(document.querySelector('main')).toMatchDOM(
+      <main>
+        <div></div>
+        <div></div>
+        <div></div>
+      </main>
+    );
+  });
+
   it('should render textarea value', async () => {
     const Cmp = component$(() => {
       const signal = useSignal('value 123');

packages/qwik/src/server/ssr-container.ts

@@ -1089,9 +1089,11 @@ class SSRContainer extends _SharedContainer implements ISSRContainer {
         }
 
         if (key === dangerouslySetInnerHTML) {
-          innerHTML = String(value);
-          key = QContainerAttr;
-          value = QContainerValue.HTML;
+          if (value) {
+            innerHTML = String(value);
+            key = QContainerAttr;
+            value = QContainerValue.HTML;
+          }
           // we can skip this attribute for a style node
           // because we skip materializing the style node
           if (tag === 'style') {