Skip to content

[Accordion] Opening animation isn't cancelled when a panel is initially open #1588

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
mj12albert opened this issue Mar 21, 2025 · 2 comments
Labels
bug 🐛 Something doesn't work component: accordion This is the name of the generic UI component, not the React module! has workaround

Comments

@mj12albert
Copy link
Member

mj12albert commented Mar 21, 2025

Repro: https://codesandbox.io/p/sandbox/eloquent-gwen-dpp375

Tested with transitions but likely to happen with animations as well, the underlying collapsible's open state can't be determined before the first render when all the panels are indexed and the accordion's value prop ['value'] can be resolved to the panel's initial states

@mj12albert mj12albert added bug 🐛 Something doesn't work component: accordion This is the name of the generic UI component, not the React module! labels Mar 21, 2025
@mj12albert
Copy link
Member Author

A workaround is to explicitly set the value prop on accordion items, even if it's just the index:

<Accordion.Root defaultValue={[0]}>
  <Accordion.Item value={0} / >
  <Accordion.Item value={1} / >
</Accordion.Root>

{/* or */} 

<Accordion.Root defaultValue={['settings']}>
  <Accordion.Item value="home" / >
  <Accordion.Item value="settings" / >
</Accordion.Root>

@mj12albert
Copy link
Member Author

In Radix, the item's value is a required prop: https://www.radix-ui.com/primitives/docs/components/accordion#item

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug 🐛 Something doesn't work component: accordion This is the name of the generic UI component, not the React module! has workaround
Projects
None yet
Development

No branches or pull requests

1 participant