window.initEasyToggleState(); does not work as expected

[jenstornell]

window.initEasyToggleState(); does not really work.

In my case I have a page with multiple dropdowns. All of them are activated onload. Then I add a new one with ajax.

It's not aware of the new dropdown so I run window.initEasyToggleState();. Now the new dropdown work as expected. However, all the other ones stop working.

I suspected that every old dropdown now has two events on each of them instead of one. It will therefor toggle open and then toggle close in one go.

To prove my theory I added two functions in my ajax.

window.initEasyToggleState();
window.initEasyToggleState();

Now there is a total of 3 events on each old dropdown and 2 on the new dropdown. It means that the new dropdown open and close so fast that it appears to be broken. The old dropdowns now work again. Open + close + open.

I hope you understand what I mean here. In a perfect world it would not duplicate events where they already exists.

Ugly workaround

This workaround will render everything on the screen again which will also remove all events. Very dirty.

document.querySelector('body').outerHTML = document.querySelector('body').outerHTML;

Update

If I already have a dropdown open when doing the above it will not be closed automatically. I solved it with the below code. ($$ is my internal way for document.querySelectorAll).

Basically I remove the toggle class is-open from all elements where it is set. Also data-toggle-state is forced set to false.

$$('falldown-toggle').forEach(el => {
  el.classList.remove('is-open');
});

$$('falldown-content').forEach(el => {
  el.classList.remove('is-open');
  el.dataset.toggleState = false;
});

[Twikito]

Hi!
Once again, thanks for taking time to report this issue.

Yes, I know I can have some issues with Ajax based UI. But wait, I have an idea. Let me investigate.

[Twikito]

@jenstornell Can you tell me if this fix works for you?

[jenstornell]

I removed my workaround and added the new version. With my first tests it seems to work just like expected.

I saw that it required a lot of changes to your code so I can't guarantee that it did not break anywhere else. If I find anything I'll add a new issue about it.

Anyway, well done!