themesberg / themesberg/flowbite
Request - html driven way to reset modal state
Nobody has claimed this yet.
- Dominant language
- HTML
- Stars
- 9.4k
- Forks
- 862
- PR merge metrics
- No merged PRs in 30d
Description
Is your feature request related to a problem? Please describe.
I am using Flowbite alongside HTMX. I have a modal for a particular CRUD operation; the action of the modal button is to post (using HTMX) to the backend. Depending on whether validation succeeds on the backend, I either upsert to the DB and rerender the content pane (behind the modal), or I keep the modal showing and rerender its contents with validation annotations. This all works; what fails is that the modal backdrop stays open in the success case, because I don't (can't) have the data-modal-toggle attribute on the save button (because I may wish to keep the modal open with validation).
Describe the solution you'd like
What I'd like is something along the lines of: "data-modal-initial-state", with either open or closed. IF set to closed, FlowBite should check for a backdrop associated with the modal, and automatically clear it.
Describe alternatives you've considered
Right now I have a snippet of js which clears the backdrop if it finds it. This isn't great, because it's literally the one piece of custom js in my app - everything else is markup rendered by the backend via HTMX, and Flowbite providing behavior. Taking care of this interaction would get me back to a "pure" state.
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 by tracing Flowbite's modal open/close behavior and backdrop handling against the HTMX success and validation flows described in the issue. Done means the proposed HTML-driven state resets the backdrop after a successful operation while preserving the modal and its validation content when the backend rejects the request.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- html, javascript, tailwindcss
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100