themesberg / themesberg/flowbite

Accordion issue with Flowbite 2.2

Open
#758 7 comments 0 reactions 1 assignee View on GitHub

@zoltanszogyenyi is already working on this.

Since Dec 25, 2023.

bug v2.2.2
Dominant language
HTML
Stars
9.4k
Forks
862
PR merge metrics
No merged PRs in 30d

Description

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.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.