search

radix-ui / primitives

Radix Primitives is an open-source UI component library for building high-quality, accessible design systems and web apps. Maintained by @workos.
https://radix-ui.com/primitives
MIT License
15.86k stars 823 forks source link

Height animation doesn't work for nested accordions #1395

Closed Temzasse closed 2 years ago

Temzasse commented 2 years ago

Bug report

Current Behavior

By adding a nested accordion within another accordion the height is not animated correctly and the nested accordion is clipped by the content element.

Expected behavior

In this demo the height animations work as expected, however it is much older version of the accordion component.

Reproducible example

CodeSandbox

Suggested solution

Maybe the --radix-accordion-content-height CSS variable can be kept in sync with the content height by using ResizeObserver?

Additional context

Your environment

Software Name(s) Version
Radix Package(s) @radix-ui/react-accordion 0.1.6
React n/a 17.0.2
Browser Chrome 101
Assistive tech
Node n/a
npm/yarn
Operating System macOS Monterey 12.3
andy-hook commented 2 years ago

Hey @Temzasse , this was fixed in https://github.com/radix-ui/primitives/pull/1344, if you use the latest RC and remove forwards from the animation they should work as expected:

https://codesandbox.io/s/cool-brook-m7sznz