fix: collapsible renders correctly on CSR

Author: thejackshelton

.changeset/lucky-carrots-pay.md

@@ -0,0 +1,5 @@
+---
+'@qwik-ui/headless': patch
+---
+
+fix: collapsible renders correctly on CSR

apps/website/src/routes/docs/headless/collapsible/examples/csr.tsx

@@ -0,0 +1,28 @@
+import { component$, useStyles$, useSignal } from '@builder.io/qwik';
+import styles from '../snippets/collapsible.css?inline';
+import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '@qwik-ui/headless';
+import SVG from './svg';
+
+export default component$(() => {
+  useStyles$(styles);
+  const isCollapsibleRendered = useSignal(false);
+
+  return (
+    <>
+      <button onClick$={() => (isCollapsibleRendered.value = true)}>
+        Render Collapsible
+      </button>
+      {isCollapsibleRendered.value && (
+        <Collapsible class="collapsible">
+          <CollapsibleTrigger class="collapsible-trigger">
+            <span>Trigger</span>
+            <SVG />
+          </CollapsibleTrigger>
+          <CollapsibleContent class="collapsible-content collapsible-content-outline ">
+            Content
+          </CollapsibleContent>
+        </Collapsible>
+      )}
+    </>
+  );
+});

apps/website/src/routes/docs/headless/collapsible/index.mdx

@@ -136,6 +136,14 @@ To fix this, add a child element to the content, and set the padding or border o
 
 > Rather than dealing with this under the hood, we thought it'd be appropriate to keep style management as simple as possible. Let us know if you have a better solution!
 
+## CSR
+
+The collapsible can be rendered both server-side or client-side, same with the rest of the components.
+
+<Showcase name="csr" />
+
+The main difference, is there is no server to client handoff. This can be useful if you're navigating via SPA.
+
 ## Example CSS
 
 <CodeSnippet name="collapsible.css" />

packages/kit-headless/src/components/collapsible/collapsible-content.tsx

@@ -35,7 +35,9 @@ export const CollapsibleContent = component$((props: CollapsibleContentProps) =>
       return;
     }
 
-    await context.getContentDimensions$();
+    if (context.isOpenSig.value) {
+      await context.getContentDimensions$();
+    }
 
     /* check if there's a transition or animation, we set a timeout for the initial render */
     setTimeout(() => {

packages/kit-headless/src/components/collapsible/collapsible.test.ts

@@ -189,3 +189,43 @@ test.describe('Disabled', () => {
     await expect(d.getContent()).toBeHidden();
   });
 });
+
+test.describe('CSR', () => {
+  test(`GIVEN a collapsible
+        WHEN it is client-side rendered
+        THEN the collapsible trigger should be visible
+  `, async ({ page }) => {
+    const { driver: d } = await setup(page, 'csr');
+
+    await d.locator.getByRole('button', { name: 'Render Collapsible' }).click();
+    await expect(d.getTrigger()).toBeVisible();
+  });
+
+  test(`GIVEN a CSR collapsible
+        WHEN the trigger is clicked
+        THEN the collapsible should be opened
+`, async ({ page }) => {
+    const { driver: d } = await setup(page, 'csr');
+
+    await d.locator.getByRole('button', { name: 'Render Collapsible' }).click();
+    await expect(d.getTrigger()).toBeVisible();
+
+    await d.getTrigger().click();
+    await expect(d.getContent()).toBeVisible();
+  });
+
+  test(`GIVEN an open CSR collapsible
+        WHEN the trigger is clicked
+        THEN the collapsible should be closed
+`, async ({ page }) => {
+    const { driver: d } = await setup(page, 'csr');
+
+    await d.locator.getByRole('button', { name: 'Render Collapsible' }).click();
+    await expect(d.getTrigger()).toBeVisible();
+
+    await d.openCollapsible('click');
+    await d.getTrigger().click();
+
+    await expect(d.getContent()).toBeHidden();
+  });
+});