flowbite icon indicating copy to clipboard operation
flowbite copied to clipboard

Not properly re-initializing Flowbite after turbo stream render

Open cyu opened this issue 1 year ago • 0 comments
trafficstars

Describe the bug With the most recent changes to flowbite.turbo.js, the turbo:after-stream-render is fired on the document, but the event listener is attached to the window. Therefore, initFlowbite is never called when after stream render.

To Reproduce Steps to reproduce the behavior:

  1. Render an Accordion component from a turbo stream render
  2. The Accordion will not be initialized and will not respond to events

Expected behavior When initFlowbite is called properly after turbo stream render, the Accordion component is initialized and will respond to click events

Screenshots If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

  • OS: Mac OSX
  • Browser: Safari
  • Version: 17.4

Smartphone (please complete the following information):

  • Device: N/A
  • OS: N/A
  • Browser: N/A
  • Version: N/A

Additional context Here are the relevant code that is causing this issue:

This is where we're dispatching the custom turbo:after-stream-render event (note that it fires the event from document): https://github.com/themesberg/flowbite/blob/aee4853c2b043efda7ef3287733408e20300046a/src/index.turbo.ts#L26

This is how we're binding to the that custom event to call initFlowbite: https://github.com/themesberg/flowbite/blob/aee4853c2b043efda7ef3287733408e20300046a/src/index.turbo.ts#L39

Unfortunately, this Events class binds to window and not document: https://github.com/themesberg/flowbite/blob/aee4853c2b043efda7ef3287733408e20300046a/src/dom/events.ts#L13

A workaround is to create your own listener that listens to the document instead:

document.addEventListener("turbo:after-stream-render", () => {
  window.initFlowbite()
})

cyu avatar Jun 02 '24 19:06 cyu