fix(collapse): show children if initial in prop is true

.changeset/sixty-lizards-provide.md

@@ -0,0 +1,6 @@
+---
+"@chakra-ui/transition": patch
+---
+
+Fixed a bug where children of `<Collapse />` where not rendered if prop `in` was
+true on first render

packages/transition/src/collapse.tsx

@@ -99,7 +99,7 @@ export const Collapse = React.forwardRef<HTMLDivElement, CollapseProps>(
     const [display, setDisplay] = React.useState<Display>(() => {
       if (!fromZeroHeight) return "block"
       const hidden = getInitialHidden()
-      return hidden ? "block" : "none"
+      return hidden ? "none" : "block"
     })
 
     useUpdateEffect(() => {

packages/transition/stories/collapse.stories.tsx

@@ -43,3 +43,19 @@ export const WithUnmount = () => <CollapseExample unmountOnExit />
 export const WithoutOpacityTransition = () => (
   <CollapseExample animateOpacity={false} />
 )
+
+export const WithInitialIn = () => (
+  <Collapse in>
+    <div>
+      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
+      Lorem Ipsum has been the industry's standard dummy text ever since the
+      1500s, when an unknown printer took a galley of type and scrambled it to
+      make a type specimen book. It has survived not only five centuries, but
+      also the leap into electronic typesetting, remaining essentially
+      unchanged. It was popularised in the 1960s with the release of Letraset
+      sheets containing Lorem Ipsum passages, and more recently with desktop
+      publishing software like Aldus PageMaker including versions of Lorem
+      Ipsum.
+    </div>
+  </Collapse>
+)

packages/transition/tests/collapse.test.tsx

@@ -0,0 +1,23 @@
+import * as React from "react"
+import { Collapse } from "../src"
+import { render, screen } from "@chakra-ui/test-utils"
+
+describe("<Collapse />", () => {
+  it("should hide its children", async () => {
+    render(
+      <Collapse>
+        <div data-testid="collapse-children">Test</div>
+      </Collapse>,
+    )
+    expect(await screen.findByTestId("collapse-children")).not.toBeVisible()
+  })
+
+  it("should render its children on initial in", async () => {
+    render(
+      <Collapse in>
+        <div data-testid="collapse-children">Test</div>
+      </Collapse>,
+    )
+    expect(await screen.findByTestId("collapse-children")).toBeVisible()
+  })
+})