Merge pull request #7886 from QwikDev/v2-finding-dom-parent

fix: finding parent dom element from projected content

Author: wmertens

.changeset/shy-shirts-glow.md

@@ -0,0 +1,5 @@
+---
+'@qwik.dev/core': patch
+---
+
+fix: finding parent dom element from projected content

packages/qwik/src/core/client/dom-container.ts

@@ -95,7 +95,7 @@ export function getDomContainerFromQContainerElement(qContainerElement: Element)
 /** @internal */
 export function _getQContainerElement(element: Element | VNode): Element | null {
   const qContainerElement: Element | null = Array.isArray(element)
-    ? (vnode_getDomParent(element) as Element)
+    ? (vnode_getDomParent(element, true) as Element)
     : element;
   return qContainerElement.closest(QContainerSelector);
 }
@@ -282,7 +282,9 @@ export class DomContainer extends _SharedContainer implements IClientContainer {
         if (isSlotProp(prop)) {
           const value = props[i + 1];
           if (typeof value == 'string') {
-            props[i + 1] = this.vNodeLocate(value);
+            const projection = this.vNodeLocate(value);
+            props[i + 1] = projection;
+            vnode_getProp(projection, QSlotParent, (id) => this.vNodeLocate(id));
           }
         }
       }

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

@@ -623,7 +623,8 @@ const vnode_ensureTextInflated = (journal: VNodeJournal, vnode: TextVNode) => {
   const textVNode = ensureTextVNode(vnode);
   const flags = textVNode[VNodeProps.flags];
   if ((flags & VNodeFlags.Inflated) === 0) {
-    const parentNode = vnode_getDomParent(vnode)!;
+    const parentNode = vnode_getDomParent(vnode);
+    assertDefined(parentNode, 'Missing parent node.');
     const sharedTextNode = textVNode[TextVNodeProps.node] as Text;
     const doc = parentNode.ownerDocument;
     // Walk the previous siblings and inflate them.
@@ -1035,7 +1036,7 @@ export const vnode_insertBefore = (
    * unlink the previous or next sibling, we don't know that after "a" node is "b". So we need to
    * find children first (and inflate them).
    */
-  const domParentVNode = vnode_getDomParentVNode(parent);
+  const domParentVNode = vnode_getDomParentVNode(parent, false);
   const parentNode = domParentVNode && domParentVNode[ElementVNodeProps.element];
   let domChildren: (Element | Text)[] | null = null;
   if (domParentVNode) {
@@ -1148,14 +1149,24 @@ export const vnode_insertBefore = (
   }
 };
 
-export const vnode_getDomParent = (vnode: VNode): Element | Text | null => {
-  vnode = vnode_getDomParentVNode(vnode) as VNode;
+export const vnode_getDomParent = (
+  vnode: VNode,
+  includeProjection = true
+): Element | Text | null => {
+  vnode = vnode_getDomParentVNode(vnode, includeProjection) as VNode;
   return (vnode && vnode[ElementVNodeProps.element]) as Element | Text | null;
 };
 
-export const vnode_getDomParentVNode = (vnode: VNode): ElementVNode | null => {
+export const vnode_getDomParentVNode = (
+  vnode: VNode,
+  includeProjection = true
+): ElementVNode | null => {
   while (vnode && !vnode_isElementVNode(vnode)) {
-    vnode = vnode[VNodeProps.parent]!;
+    vnode =
+      vnode[VNodeProps.parent] ||
+      (includeProjection
+        ? vnode_getProp(vnode, QSlotParent, (id) => (vnode_isVNode(id) ? id : null))
+        : null)!;
   }
   return vnode;
 };
@@ -1172,7 +1183,7 @@ export const vnode_remove = (
   }
 
   if (removeDOM) {
-    const domParent = vnode_getDomParent(vParent);
+    const domParent = vnode_getDomParent(vParent, false);
     const isInnerHTMLParent = vnode_getAttr(vParent, dangerouslySetInnerHTML);
     if (isInnerHTMLParent) {
       // ignore children, as they are inserted via innerHTML

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

@@ -2427,6 +2427,48 @@ describe.each([
     );
   });
 
+  it('should toggle text content projection', async () => {
+    const Parent = component$(() => {
+      return <Slot />;
+    });
+
+    const Cmp = component$(() => {
+      const show = useSignal(false);
+      return (
+        <>
+          <button onClick$={() => (show.value = !show.value)}></button>
+          {show.value && (
+            <Parent>
+              <Slot />
+            </Parent>
+          )}
+        </>
+      );
+    });
+    const { vNode, document } = await render(<Cmp>content</Cmp>, { debug: DEBUG });
+    expect(vNode).toMatchVDOM(
+      <Component ssr-required>
+        <Fragment ssr-required>
+          <button></button>
+          {''}
+        </Fragment>
+      </Component>
+    );
+    await trigger(document.body, 'button', 'click');
+    expect(vNode).toMatchVDOM(
+      <Component ssr-required>
+        <Fragment ssr-required>
+          <button></button>
+          <Component ssr-required>
+            <Projection ssr-required>
+              <Projection ssr-required>content</Projection>
+            </Projection>
+          </Component>
+        </Fragment>
+      </Component>
+    );
+  });
+
   describe('regression', () => {
     it('#1630', async () => {
       const Child = component$(() => <b>CHILD</b>);