Skip to content

[Toolkit][Flowbite] Rename the modal Stimulus controller to avoid a collision with Flowbite - #3842

Merged
Kocal merged 1 commit into
symfony:3.xfrom
Kocal:fix/flowbite-modal-collision
Sep 8, 2026
Merged

Kocal merged 1 commit into
symfony:3.xfrom
Kocal:fix/flowbite-modal-collision

Conversation

@Kocal

@Kocal Kocal commented Sep 8, 2026

Copy link
Copy Markdown
Member
Q A
Bug fix? yes
New feature? no
Deprecations? no
Documentation? no
Issues Fix #3742
License MIT

The modal recipe registered a Stimulus controller named modal, so its targets and values rendered as data-modal-target and data-modal-open-value. Flowbite's own JavaScript already uses data-modal-target, where it expects the id of the dialog to open. Loading both on the same page makes Flowbite scan the markup, find data-modal-target="trigger" and data-modal-target="modal", fail to resolve them as ids, and log two errors on every page that renders a modal:

Modal with id trigger does not exist. Are you sure that the data-modal-target attribute points to the correct modal id?
Modal with id modal does not exist. ...

The controller is renamed to flowbite-modal, which moves its attributes to data-flowbite-modal-target and data-flowbite-modal-open-value and leaves data-modal-target to Flowbite. The recipe is copied into the user's application at install time, so applications that already installed it keep their own consistent copy and are not affected.

Only the modal recipe was affected: the alert, dropdown and tabs controllers do not collide, since Flowbite keys those off data-dropdown-toggle and data-tabs-toggle, which the recipes never emit.

…ollision with Flowbite

| Q              | A
| -------------- | ---
| Bug fix?       | yes
| New feature?   | no
| Deprecations?  | no
| Documentation? | no
| Issues         | Fix symfony#3742
| License        | MIT

The `modal` recipe registered a Stimulus controller named `modal`, so its targets and values rendered as `data-modal-target` and `data-modal-open-value`. Flowbite's own JavaScript already uses `data-modal-target`, where it expects the id of the dialog to open. Loading both on the same page makes Flowbite scan the markup, find `data-modal-target="trigger"` and `data-modal-target="modal"`, fail to resolve them as ids, and log two errors on every page that renders a modal:

```
Modal with id trigger does not exist. Are you sure that the data-modal-target attribute points to the correct modal id?
Modal with id modal does not exist. ...
```

The controller is renamed to `flowbite-modal`, which moves its attributes to `data-flowbite-modal-target` and `data-flowbite-modal-open-value` and leaves `data-modal-target` to Flowbite. The recipe is copied into the user's application at install time, so applications that already installed it keep their own consistent copy and are not affected.

Only the modal recipe was affected: the `alert`, `dropdown` and `tabs` controllers do not collide, since Flowbite keys those off `data-dropdown-toggle` and `data-tabs-toggle`, which the recipes never emit.
@Kocal Kocal self-assigned this Sep 8, 2026
@carsonbot carsonbot added Bug Bug Fix Toolkit Status: Needs Review Needs to be reviewed labels Sep 8, 2026
@Kocal
Kocal merged commit 2e9d0a1 into symfony:3.x Sep 8, 2026
38 of 39 checks passed
@Kocal
Kocal deleted the fix/flowbite-modal-collision branch September 8, 2026 11:25
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Bug Bug Fix Status: Needs Review Needs to be reviewed Toolkit

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Flowbite-4 Modal component documentation and data-modal-target trigger

2 participants