search

ariakit / ariakit

Toolkit for building accessible web apps with React
https://ariakit.org
MIT License
7.87k stars 370 forks source link

Disclosure is animating in even if the default state is open #3835

Open bengry opened 5 months ago

bengry commented 5 months ago

Current behavior

When a <Disclosure> is mounted, if its defaultOpen is true (or is controlled and open is true), the disclosure still animates in.

This is not the expected behavior, e.g. when building an Accordion component on top of Disclosure (or even when using it directly), the initial mount shouldn't be animated.

Here's an example for an Accordion element from MUI - the initial render doesn't animate, while subsequent clicks do.

Steps to reproduce the bug

  1. Open https://stackblitz.com/edit/vitejs-vite-pw832a?file=src%2FApp.tsx
  2. Look at the preview (refresh it if you want to reproduce)

Expected behavior

There should be no animation on the first mount, only on changes to the open state.

Workaround

https://github.com/ariakit/ariakit/issues/3835#issuecomment-2134987062

Possible solutions

No response

diegohaz commented 5 months ago

You can pass a data-initial prop to the element and use it as a selector: https://stackblitz.com/edit/vitejs-vite-m8qvgu?file=src%2Fstyle.css,src%2FApp.tsx

However, the library should make this easier.

bengry commented 5 months ago

Thanks @diegohaz. Works like a charm. ~Is data-initial documented anywhere?~ Nevermind, this is something that the consumer does. Could've been called whatever, since it's just binding the initialRender state to something targetable from CSS.

Like you've said, it would be nice to have this more easily exposed by the library, but this is good enough for now.