themesberg / themesberg/flowbite

Request - html driven way to reset modal state

Open
#782 0 comments 2 reactions 0 assignees View on GitHub

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

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 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.