From 9dbf46dea6c2b553ee464218c964ef7b9a2c8036 Mon Sep 17 00:00:00 2001 From: Jalen Yan Date: Thu, 8 Jan 2026 23:20:42 +0800 Subject: [PATCH] fix(modal): add turbo-permanent attributes to backdrop in turbo entry Patch Modal._createBackdrop in index.turbo.ts to add data-turbo-permanent and data-turbo-temporary attributes to the backdrop element. This prevents Turbo Morph from removing the dynamically created backdrop during page refresh, while keeping the core Modal component unchanged for non-Turbo users. Fixes #1123 --- src/index.turbo.ts | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/src/index.turbo.ts b/src/index.turbo.ts index a8ad2d45..e663671a 100644 --- a/src/index.turbo.ts +++ b/src/index.turbo.ts @@ -16,6 +16,17 @@ import Datepicker from './components/datepicker'; import { initFlowbite } from './components/index'; import Events from './dom/events'; +// 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', ''); + } +}; + // Since turbo maintainers refuse to add this event, we'll add it ourselves // https://discuss.hotwired.dev/t/event-to-know-a-turbo-stream-has-been-rendered/1554/10 const afterRenderEvent = new Event('turbo:after-stream-render');