Skip to content

Commit

Permalink
chore(Accordion): fix defaultOpen flicker on first render (#2214)
Browse files Browse the repository at this point in the history
resolves #2178
  • Loading branch information
Barsnes authored Aug 12, 2024
1 parent 68ff033 commit 90ca009
Show file tree
Hide file tree
Showing 3 changed files with 10 additions and 2 deletions.
5 changes: 5 additions & 0 deletions .changeset/chilled-icons-chew.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@digdir/designsystemet-react": patch
---

Accordion: Fix `defaultOpen` flicker on first render
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ describe('AnimateHeight', () => {
it('Appends given style to root element', () => {
const style = { color: 'rgb(255, 0, 0)' };
const { container } = render({ style });
expect(container.firstChild).toHaveStyle({ height: 0 });
expect(container.firstChild).toHaveStyle({ height: undefined });
expect(container.firstChild).toHaveStyle(style);
});

Expand Down
5 changes: 4 additions & 1 deletion packages/react/src/utilities/AnimateHeight/AnimateHeight.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down

0 comments on commit 90ca009

Please sign in to comment.