The Shopware 6 sidebar has bootstrap collapsible items for the filters. As we have a lot of filter options for one property, we put them in a properties / sub-property structure and want to collapse the child items.

So we added

<span class="collapsed" aria-expanded="false" data-toggle="collapse" data-target="#element-2647292d65d44853b2b3faaaf5a9572e">
    <span class="icon icon-arrow-medium-down icon-xs">
                    <svg> [ chevron icon ] </svg>
    </span>
</span>

And have put the subitems in a div:

<div class="subelement-group collapse" id="element-2647292d65d44853b2b3faaaf5a9572e">

It is not working, and after some debugging we found, that there is an additional event listener attached to the span which should expand the subitems div.

The attached event is this:

dropdownMenu.addEventListener('click', (event) => {
   event.stopPropagation();
});

If we remove the stopProgation call, everything seems to work fine. Now we a wondering if we just just make a pull request for the Shopware core which removes this line or what could be the reason why it was added.

We also believe that there is no other way to undo the stop propagation?

EDIT

We realized that we cannot just remove the stopPropagation. It is needed in case the filter is a dropdown at the top of the page. We also tried to convert the <span> into a <button> but it still does not seem to receive the click events.

EDIT2: Something like this works for the sidebar: (after changing the span to a button)

dropdownMenu.addEventListener('click', (event) => {
    if (event.target.tagName === 'BUTTON' || event.target.closest('button') != null) {
        return;
    }
    event.stopPropagation();
});

For the top-bar it does ot work so well: The dropdown still closes when expanding.