Js not behaving

1

Hi,

I have this simple snippet of code:

document.addEventListener("turbo:load", function () {
    let filterBar = document.querySelector('.filter-bar');

    if (filterBar) {
        filterBar.querySelector('.filter-bar-title').addEventListener('click', () => {
            filterBar.querySelector("sl-dialog").show();
        });
    }
});

When I do a fresh page load, i click the filter bar and it takes a while or so before it’s recognised and my sl-dialog component opens.

If I then navigate to another page (which has the same filter bar and dialog), the dialog never opens and the click is not recognised.

Is there a solution to this? Am I doing something wrong?

2

Maybe try putting a console.log() inside the turbo:load event-handler, just to see if that is firing. Maybe there is something wrong in the wiring? Or maybe the issue is somehow in the .show(). This would help narrow down where the problem is.