Accordion (Tailwind): AccordionTabs collapse delayed

[sdwillbrand]

Describe the bug

When closing the AccordionTab the transition delays a bit.

Reproducer

https://codesandbox.io/p/sandbox/primereact-bug-accordion-collapse-delayed-9yrj8d

PrimeReact version

10.3.0

React version

18.x

Language

TypeScript

Build / Runtime

Vite

Browser(s)

No response

Steps to reproduce the behavior

1. Create Accordion with AccordionTab
2. Toggle AccordionTab

Expected behavior

Smooth transitioning when closing the AccordionTab

[melloware]

I assume this is unstyled or tailwind related because the showcase transitions fine? https://primereact.org/accordion/#basic

[sdwillbrand]

We suspect the same.

[melloware]

Hmm take a look at this: https://codesandbox.io/p/sandbox/primereact-bug-accordion-collapse-delayed-forked-98s696

[sdwillbrand]

Yeah that looks good. We found an edge case, where a small content causes the delay. For instance here, the first and second tab do have a delay, but the third with the larger content does not have a delay.

Does the transition starts at a fixed height?

[melloware]

All I see in the tailwind stuff is this?

 "p-5 transition duration-200 ease-in-out rounded-t-md font-bold transition-shadow duration-200", // Padding and transition

[sdwillbrand]

There is also a transition attribute:

 transition: TRANSITIONS.toggleable

I think PrimeReact adds classes to the AccordionTab when the Tab is toggled. If you inspect the AccordionTab while toggling you see for a short moment the classes, max-h-40 !max-h-40 overflow-hidden transition-all duration-500 ease-in-out. I am not sure if that causes a small AccordionContent to be collapsed by a tiny delay.

[melloware]

Yep you are right:

    toggleable: {
        timeout: 500,
        classNames: {
            enter: 'max-h-0',
            enterActive: '!max-h-40 overflow-hidden transition-all duration-500 ease-in-out',
            exit: 'max-h-40',
            exitActive: '!max-h-0 overflow-hidden transition-all duration-500 ease-in'
        }
    },

[melloware]

@countersoda i want to test this again after the next release to see if it is the same or worse. I can't quite figure out why its delayed.

[sdwillbrand]

@melloware Appreciated

[melloware]

@countersoda 10.3.0 is out and looks like the same behavior. I can't explain it!

[Tarik1700]

Same issue but with PanelMenu component when there are over 3 items inside the dropdown. @melloware thanks for the redirect! any additional info on status for this since i see its been open since december ?

[melloware]

@Tarik1700 yeah i took a look at it but i am not that familiar with Tailwind. So PR is welcome if not if you need immediate help I suggets you check out PrimeReact PRO support.