themesberg / themesberg/flowbite-react
Docs wrong: onClose vs dismissible
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 2.1k
- Forks
- 506
- PR merge metrics
- No merged PRs in 30d
Description
- I have searched the Issues to see if this bug has already been reported
- I have tested the latest version
Steps to reproduce
Make modal according to the official docs on Modal
Current behavior
There is no close button, even though onClose is specified.
Expected behavior
The close button should either work the way it says in the docs, or the docs should be updated!
Context
Behavior was changed in https://github.com/themesberg/flowbite-react/pull/1641 to never render the close button unless dismissible is set to true. This was clearly a breaking API change that was released in 0.12.14 (a PATCH release) with only this in the changelog:
Ensure modal close button respects dismissible prop
I accepted this insidious patch release, and all my damned close buttons disappeared, trapping my users in modals.
The PR description states this:
Fixes the modal close button to only render when the modal is dismissible. Previously, the X button in the modal header would always display, even when dismissible={false}, which created a confusing UX where the button appeared but had no effect.
Which is clearly not true, clicking on the close button would indeed call the onClose handler which I was using to (😱) close modals!
I'm salty.
I'll also note that the dismissible property is described in the docs thusly:
To enable the modal to be dismissed when clicking outside of the component (ie. the backdrop) then you can pass the dismissible prop to the component from React.
That's it. Seems unrelated? My expectation, based on my reading of the docs, would be that the onClose prop is called when the user clicks the close button. And if one were to pass dismissible=[true} then clicking on the backdrop would also cause onClose to be invoked. That's it.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the Modal documentation linked in the issue and compare its onClose and dismissible descriptions with the behavior introduced by pull request #1641. Check the 0.12.14 changelog and the related Modal component usage to establish the intended close-button behavior. Done means the documentation and example accurately describe how onClose and dismissible interact.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- documentation, frontend
- Issue type
- Documentation
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 52/100