La barra lateral de Shopware 6 tiene elementos plegables de arranque para los filtros. Como tenemos muchas opciones de filtro para una propiedad, las colocamos en una estructura de propiedades/subpropiedades y queremos colapsar los elementos secundarios.

Así que agregamos

 <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>

Y he puesto los subelementos en un div:

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

No funciona, y después de algunas depuraciones encontramos que hay un detector de eventos adicional adjunto al intervalo que debería expandir los subelementos div.

El evento adjunto es este :

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

Si eliminamos la llamada stopProgation , todo parece funcionar bien. Ahora nos preguntamos si solo hacemos una solicitud de extracción para el núcleo de Shopware que elimina esta línea o cuál podría ser la razón por la que se agregó.

¿También creemos que no hay otra forma de deshacer la propagación de parada?

EDITAR

Nos dimos cuenta de que no podemos simplemente eliminar stopPropagation. Es necesario en caso de que el filtro sea un menú desplegable en la parte superior de la página. También intentamos convertir el <span> en un <button> pero aún parece que no recibe los eventos de clic.

EDIT2: algo como esto funciona para la barra lateral: (después de cambiar el intervalo a un botón)

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

Para la barra superior no funciona tan bien: el menú desplegable aún se cierra al expandirse.