I’m trying to use an <.Accordion> component (open source provided by petal.build) in a modal form. That component contains a <script> tag with some javascript code that sets up a custom click_accordion event that gets triggered on the client side whenever the user clicks on the header to either expand or collapse the contained content accordingly.

I’m noticing weird behavior where sometimes the click_accordion event exposed by that component shows up as an event in the browser properly, but then disappears sort of randomly afterwards. When this happens, I don’t seem to be able to get it to register again even after reloading page, clearing cache, shutting down/restarting server, open/closing browser, etc.

Then I tried moving the event registration code (e.g. window.addEventListener) from the Accordion LiveComponent into the parent LiveView form itself and it works reliably every time. I guess I’m happy that it works now but also confused as to why since it seems more elegant that that code should be in the component itself rather than having to remember to put it in the parent when it’s used each time.

I’m sure I’m missing something but not sure what. Perhaps I need a phx-target or phx-ignore or am misunderstanding something about the liveview lifecycle? I would appreciate any comments for how to register custom event for use by JS.dispatch in a LiveViewComponent

addEventListener-FromLiveComponent1200×672 104 KB