Modal backdrop removed during Turbo Morph refresh

[jalen0x]

Describe the bug

When using Flowbite Modal with Turbo (Rails 8) and turbo_stream.refresh with Morph, the dynamically created backdrop element is removed during the morph process. This causes the modal to appear broken (no backdrop) or close unexpectedly.

The issue is that Turbo Morph compares the current DOM with the server response and removes elements that don't exist in the response. Since the backdrop is dynamically created by JavaScript and not present in the server HTML, it gets removed.

Root Cause

The _backdropEl created in _createBackdrop() doesn't have data-turbo-permanent attribute, so Turbo Morph removes it during refresh.

Proposed Solution

Add data-turbo-permanent and data-turbo-temporary attributes to the backdrop element when it's created:

// Patch Modal to add Turbo-compatible attributes to backdrop
// This prevents Turbo Morph from removing dynamically created backdrop elements
const originalCreateBackdrop = Modal.prototype._createBackdrop;
Modal.prototype._createBackdrop = function () {
    originalCreateBackdrop.call(this);
    if (this._backdropEl) {
        this._backdropEl.setAttribute('data-turbo-permanent', '');
        this._backdropEl.setAttribute('data-turbo-temporary', '');
    }
};

• data-turbo-permanent: Tells Turbo to preserve this element during morph/refresh
• data-turbo-temporary: Tells Turbo not to cache this element (prevents duplicate backdrops on browser back)

To Reproduce

1. Create a Rails 8 app with Turbo and Flowbite
2. Open a Flowbite modal
3. Trigger turbo_stream.refresh from the server (e.g., via broadcast or form submission)
4. Observe the backdrop disappears or modal closes

Expected behavior

The modal and its backdrop should remain visible and functional during Turbo Morph refresh.

Environment

• Flowbite version: latest
• Turbo version: 8.x
• Framework: Rails 8 with Hotwire