search

themesberg / flowbite

Open-source UI component library and front-end development framework based on Tailwind CSS
https://flowbite.com
MIT License
7.31k stars 710 forks source link

Accordion issue with Flowbite 2.2 #758

Open BrynCB opened 6 months ago

BrynCB commented 6 months ago

Describe the bug

Flowbite 2.2 is unable to work flexibly with accordions in the same way that 1.8.1 (and possibly other versions) could. In my custom blocks for Gutenberg, each accordion (H2 + content div) is wrapped in a div due to the nature of repeatable InnerBlocks in the WordPress post editor. The accordions are used for an FAQ.

The data attributes are still sequentially numbered, but FAQ items can be interspersed on a page across multiple block instances (for example, when multiple FAQ sections are used, each with its own heading). That's not to say data attributes reset the count each time - they are sequential down a given page no matter how many separate blocks are present. This was not a problem with 1.8.1 - which I've reverted to for the time being - and is a problem with 2.2. When using 2.2 (the latest as of writing this), only the FAQ items in the last block containing accordion code are functional. The other accordion items on any given page are unresponsive.

To Reproduce Steps to reproduce the behaviour:

  1. Copy any of the accordion blocks from the Flowbite block library
  2. Place several on a test page
  3. Add some JS to ensure that they are sequentially numbered despite being broken into different sections.
  4. (Optional, may be necessary) Wrap the H2 + content div pairs in a div. No idea if this is relevant.
  5. Interact with accordion items on the frontend.

Expected behaviour All accordion items expand on click. If only one should be expanded at one time, they should collapse appropriately even when an item in another section/block is selected. This is how it works for me with 1.8.1.

Devices: Behaviour is consistent for me across different browsers and devices.

Additional context I am not using Flowbite in a React or Vue project. This is a WordPress plugin with PHP, JS, HTML & CSS. I haven't experienced other issues with Flowbite's JS features, and 1.8.1 works flawlessly for me.

BrynCB commented 6 months ago

I made a minimal demo in CodePen here: https://codepen.io/brynb/pen/abMbrzY/a9d8a848219023a5484c156818cb3ba3

Frontend-only view: https://codepen.io/brynb/live/abMbrzY/a9d8a848219023a5484c156818cb3ba3

As expected, despite the sequential numbering throughout the page, only the last FAQ section is working with Flowbite 2.2.

zoltanszogyenyi commented 6 months ago

Hey @BrynCB,

Thanks for opening up the issue. I'll have a look at this after the holidays for the v2.2.2 release.

Cheers, Zoltan