chore(Accordion): fix defaultOpen flicker on first render

digdir · Aug 8, 2024 · 48b688f · 48b688f
1 parent 89f959d
commit 48b688f
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 3 deletions.
diff --git a/packages/react/src/components/Accordion/Accordion.stories.tsx b/packages/react/src/components/Accordion/Accordion.stories.tsx
@@ -15,7 +15,7 @@ export default {
 
 export const Preview: StoryFn<typeof Accordion.Root> = (args) => (
   <Accordion.Root {...args}>
-    <Accordion.Item>
+    <Accordion.Item defaultOpen>
       <Accordion.Heading level={3}>
         Hvem kan registrere seg i Frivillighetsregisteret?
       </Accordion.Heading>
@@ -26,7 +26,7 @@ export const Preview: StoryFn<typeof Accordion.Root> = (args) => (
         til fysiske personer. Virksomheten må ha et styre.
       </Accordion.Content>
     </Accordion.Item>
-    <Accordion.Item>
+    <Accordion.Item defaultOpen>
       <Accordion.Heading level={3}>
         Hvordan går jeg fram for å registrere i Frivillighetsregisteret?
       </Accordion.Heading>

diff --git a/packages/react/src/utilities/AnimateHeight/AnimateHeight.tsx b/packages/react/src/utilities/AnimateHeight/AnimateHeight.tsx
@@ -22,7 +22,10 @@ export const AnimateHeight = ({
   style,
   ...rest
 }: AnimateHeightProps) => {
-  const [height, setHeight] = useState<number>(0);
+  /* We don't know the initial height we want to start with.
+  It depends on if it should start open or not, therefore we set height to `undefined`,
+  so we don't get any layoutshift on first render */
+  const [height, setHeight] = useState<number | undefined>(undefined);
   const prevOpen = usePrevious(open);
   const openOrClosed: InternalState = open ? 'open' : 'closed';
   const [state, setState] = useState<InternalState>(openOrClosed);