--open classes don't always get removed when a handorgel closes

[JacobDB]

In some cases, the --open classes aren't removed once a handorgel is closed. I'm having difficulty figuring out exactly when this happens, but it seems to happen more often when you quickly open and close. In the screenshot below, you can see that the handorgel__content has height: 0px; set, but both it and its related handorgel__header both still have their --open modifiers. This may be Firefox specific; the issue occurs in Firefox Developer Edition 84.0b4, but not in Chrome 87.0.4280.66 (both tested on Windows 10). I haven't had a chance to test in other browsers yet.

[oncode]

Hi @JacobDB Thanks for your report, at first I couldn't reproduce the issue, but with the current firefox it also happens. Will have a look.

[derby]

Also happens on Mac OS with Firefox latest version ( 88.0 ) and Firefox Developer latest version ( 89.0b8 ). The result is that the collapse state is not animated. Is there any fix for that?

[derby]

I fixed the firefox problem by setting a tiny timeout for the animation function. I created a pull request, it would be nice if you could review it soon, so that we can update. I don't know if this is the real solution but it works for now.

Thanks in advance!

[SpikeShape]

Just wanted to bump this thread as I would love t see this pull request merged as well.

[derby]

Nothing seems to happen here. Hey @oncode can you provide some information about if and when you plan to merge my request? I really would like to import directly from node_modules for production.

[derby]

@oncode passiert hier nochmal was? Zumindest die Pull Requests könntest du mal mergen.

[JacobDB]

Would be nice to get this properly fixed, but here's an easy workaround for anyone struggling with this.

const HANDORGELS = document.querySelectorAll(".handorgel");

HANDORGELS.forEach((element) => {
    const HANDORGEL = new handorgel(element);

    /**
     * Fix Firefox bug
     */
    HANDORGEL.on("fold:close", (fold) => {
        setTimeout(() => {
            fold.header.classList.remove("handorgel__header--open");
            fold.content.classList.remove("handorgel__content--open");
        }, 100);
    });
});

Just change the 100 to match the duration of your closing duration in milliseconds (it's 100 by default). It's not perfect because it still sort of jumps a bit, but at least it returns to its closed state.