WAIT: Dropdown doesn't work with woocommerce

Bugs
1

I create a dropdown, but it doesn’t work when I have woocommerce installed (no response when I click on the expand button). I tested on two sites. When I disable woocommerce, the dropdown works. What is the reason for this ?

2

Hello @Marcin71,

I can’t reproduce the issue locally. Do you have a link to a website, where I can see the dropdown not working?

Thank you,
Matej

3

Hi @Matej

https://bricks.hooraydekoracje.pl/

The dropdown doesn’t work in mobile view, when I click on the navigation item, it doesn’t add any class to the submenu. On disabled woocommerce it adds it correctly.

4

Hmm, I it looks like it works using dev tools? When I click it, it exapnds.

CleanShot 2024-12-24 at 11.00.28@2x
CleanShot 2024-12-24 at 11.00.28@2x920Ă—1778 59 KB

5

@Matej
It adds CI the corresponding classes when you click ? Do you call them manually in devtools ?

I also checked in firefox and on another site and it doesn’t add me open or active class when I click a menu item.

6

Hi,
no, I didn’t add any class manually. It just works. Maybe it’s some caching? What if you add another “Nav Nestable” element, without changing anything (maybe just duplicating the dropdown inside), does it work then?

Matej

7

@Matej
Thanks for trying to help. Maybe you just happened to check when I had woocommerce turned off for a while. After much trial and testing I was able to determine that the problem is not global, on a clean install it works fine. Something must be overwriting on my site. I discovered that I have duplicate actions in Event Listener, click on button, but I don’t know for what reason. So far I’ve coped by adding custom js code

document.addEventListener("click", (function(e) {
var d = e.target.closest(".brx-submenu-toggle");
    if (d) {
        var u = "hover"
          , p = d.closest("[data-toggle]");
        p && (u = p.getAttribute("data-toggle")),
        d.closest(".brxe-nav-menu.show-mobile-menu") && (u = "click"),
        d.closest(".brxe-nav-nested.brx-open") && (u = "click");
        var b = "hover" === u ? e.target.closest("[aria-expanded]") : d.querySelector("button[aria-expanded]");
        if (0 === e.detail || "click" === u || "both" === u || (b = null),
        b) {
            bricksSubmenuToggle(b);
            var v = d.parentNode;
            v.classList.toggle("active"),
            setTimeout((function() {
                v.classList.contains("active") && v.classList.add("open"),
                b.setAttribute("aria-expanded", v.classList.contains("open"))
            }
            ), 0)
        }
    }
    bricksQuerySelectorAll(document, '.brx-submenu-toggle > button[aria-expanded="true"]').forEach((function(t) {
        var n = t.closest("li");
        n || (n = t.closest(".brxe-dropdown")),
        n && !n.contains(e.target) && (bricksSubmenuToggle(t),
        n.classList.remove("active"))
    }
    ))}
))
8

Oh, yeah, I definitely tested when you had Woo disabled, as now it’s also not working for me.

But, if I remove this even listener (this code that you posted above), I can see that it’s working again. So, the problem seems to be in this code.