Accordion does not have onOpen, onClose and onToggle behaviour

[brunocascio]

Describe the bug
onOpen, onClose and onToggle are functions supported by Flowbite but are missing in this react library.

To Reproduce

1. Install flowbite
2. Try to setup onOpen property in the accordion element
3. Console shows an error about no property called onOpen

Expected behavior

1. onOpen should be fired when the accordion item is opened
2. onClose should be fired when the opened item is closed
3. toggle should be fired when opened/closed item is closed/opened respectively

Project information:

• Tailwind: 3.2.4
• Flowbite: 1.6.3
• Flowbite React: 0.3.8
• Type: Remix

[rluders]

This would be a nice enhancement.

[brenoliradev]

hey @rluders I would like to work in this enhancement.

the "onClose", "onToggle" and "onOpen" should be typed as void functions?

[tulup-conner]

So, right now the Accordion is kind of hands off and I don't really love that.. I like your idea a lot, and I think it might be best for us to just make the Accordion fully controllable by the developer. e.g.

const [currentItem, setCurrentItem] = useState(undefined);
...
<Accordion>
  <Accordion.Item id={0}>
    <Accordion.Title onClick={() => setCurrentItem(currentItem === 0 ? undefined : 0)}>Click me</Accordion.Title>
    <Accordion.Content>...</Accordion.Content>
  </Accordion.Item>
</Accordion>

The thing we would like to do is remove boilerplate like useState, in general. The problem in the case of Accordion, for example, is that we are just making the component insanely complicated for no reason to achieve a bit of magic.

[tulup-conner]

Thoughts?