themesberg / themesberg/flowbite-react

Docs wrong: onClose vs dismissible

Open
#1,658 1 comment 3 reactions 0 assignees View on GitHub

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

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.

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.