Accordion is using height to manage visibility

[pierry01]

In the Shadcn Accordion implementation, closing the Accordion applies the "hidden" class to the content, which causes it to disappear.

In our implementation, however, we are using inline JavaScript styles to set the height to zero instead of applying the "hidden" class.

This approach is causing issues when using a FormField with a FormFieldError element inside the Accordion.

The implementation should be along the lines of shadcn
https://ui.shadcn.com/docs/components/accordion

[vfonic]

As far as I know, height is used in order to be able to animate height from 0 to XXX and vice-versa (when closing the accordion).

shadcn uses the same technique through --radix-accordion-content-height: var(--radix-collapsible-content-height); CSS var.

@keyframes accordion-down {
  0% {
    height: 0;
  }
  100% {
    height: var(--radix-accordion-content-height);
  }
}

I don't know how shadcn manages the accordion content height being changed. One simple solution could be to remove the height inline style after the animation ends. This can be done via setTimeout or on animationend (I think).
I see that shadcn doesn't use this approach. They have some other way to track if accordion height needs to be updated.