KTMENU CLOSE WHEN USE SELECT2 MULTIPLE AND DESELECT OPTION
I am using the ktmenu inside it add several html elements, my problem is when using the select2 plugin,
This select is multiple, when removing an option the ktmenu closes the same
What I can do
gif of what happens
https://ibb.co/6vgxmmW
Replies (8)
Hi,
Can you try to use data-dropdown-parent="kt_mene_id" for the Select2 element? You can see a working example of this feature in this page. Refer to the Filter button in the page toolbar.
Regards.
Link to see my code
https://goonlinetools.com/snapshot/code/#947wjmedoklj6c0t6kw4op
Hi, Sean,
if I use the data-dropdown-parent property, I was missing something else ?
the strange thing is that it only happens when the select is multiple option
By the way, I use Laravel, the select2 is in a component, but I also add a direct one in the html and it gives me the same error
PD :
My code does have the id in the div kt-menu when I save it, it does not appear
<div class="menu menu-sub menu-sub-dropdown w-450px w-md-450px" data-kt-menu="true" >
My code




<div class="menu menu-sub menu-sub-dropdown w-450px w-md-450px" data-kt-menu="true" >
<!--begin::Header-->
<div class="px-7 py-5">
<div class="fs-5 text-dark fw-bold">Filtros </div>
</div>
<!--end::Header-->
<!--begin::Menu separator-->
<div class="separator border-gray-200"></div>
<div>
<div class="px-7 py-5">
<x-filtros.filtroCollapse titulo="Numero Nota Venta" filtro_contenido="filtro_nv"></x-filtros.filtroCollapse>
<x-filtros.numero filtro_contenido="filtro_nv"></x-filtros.numero>
<x-filtros.filtroCollapse titulo="Rango de Fechas" filtro_contenido="filtro_rango_fechas"></x-filtros.filtroCollapse>
<x-filtros.rangoFechas titulo2="Termino" id_fecha2="fecha_nv_fin" titulo1="Inicio" id_fecha1="fecha_nv_ini" filtro_contenido="filtro_rango_fechas">
<x-filtros.numero></x-filtros.numero>
<x-filtros.filtroCollapse titulo="Rut Cliente" filtro_contenido="filtro_rut"></x-filtros.filtroCollapse>
<x-filtros.rut filtro_contenido="filtro_rut"/></x-filtros.rut>
<x-filtros.filtroCollapse titulo="Patente" filtro_contenido="filtro_patente"></x-filtros.filtroCollapse>
<x-filtros.patente filtro_contenido="filtro_patente"></x-filtros.patente>
<x-filtros.filtroCollapse titulo="Estado Nota Venta" filtro_contenido="filtro_estado"></x-filtros.filtroCollapse>
<x-filtros.checkboxs valor="id_en" texto="nombre_en" :opciones="$estados" filtro_contenido="filtro_estado"></x-filtros.checkboxs>
<x-filtros.filtroCollapse titulo="Vendedor" filtro_contenido="filtro_vendedor"></x-filtros.filtroCollapse>
<x-filtros.select multiple="multiple" valor="id_us" texto="name_us" :opciones="$vendedores" filtro_contenido="filtro_vendedor"></x-filtros.select>
<x-filtros.filtroCollapse titulo="Marcas" filtro_contenido="filtro_marca"></x-filtros.filtroCollapse>
<x-filtros.select multiple="multiple" valor="id_mr" texto="nombre_mr" :opciones="$marcas" filtro_contenido="filtro_marca"></x-filtros.select>
<select data-dropdown-parent="#filtro_padre" multiple class="form-select form-select-solid form-select-sm" data-kt-select2="true" data-placeholder="Seleccione opción" data-allow-clear="true">
<option></option>
@foreach($vendedores as $opt)
@php
$value = $opt["id_us"];
$text = $opt["name_us"];
@endphp
<option locked="true" value="{{$value}}">{{$text}}</option>
@endforeach
</select>
</div>
</div>
<div class="px-7 py-5">
<div class="d-flex justify-content-end">
<button type="reset" class="btn btn-sm btn-light btn-active-light-primary me-2" data-kt-menu-dismiss="true">Reset</button>
<button type="submit" class="btn btn-sm btn-primary" data-kt-menu-dismiss="true">Apply</button>
</div>
</div>
<!--end::Form-->
</div>Hi,
Noted, we are able to reproduce this issue and we will try to provide you a workaround as soon as possible. We are checking it currently.
Regards.
Hi,
We have a workaround for this issue and you can implement it on your end by following the below instructions:
1. In src/js/components/app.js add below workaround right after $(element).select2(options) line:
// Handle Select2"s KTMenu parent case
if (element.hasAttribute("data-dropdown-parent") && element.hasAttribute("multiple")) {
var parentEl = document.querySelector(element.getAttribute("data-dropdown-parent"));
if (parentEl && parentEl.hasAttribute("data-kt-menu")) {
var menu = new KTMenu(parentEl);
if (menu) {
$(element).on("select2:unselect", function (e) {
element.setAttribute("data-multiple-unselect", "1");
});
menu.on("kt.menu.dropdown.hide", function(item) {
if (element.getAttribute("data-multiple-unselect") === "1") {
element.removeAttribute("data-multiple-unselect");
return false;
}
});
}
}
}2. Then recompile your assets folder with Gulp or Webpack.
Please note that the build tools are required only in the development environment just to compile the assets when the source folder files are modified. In the hosting/server deployment, you will only need the compile assets, no need to install the build tools dependencies there.
Could you please test this and let us know the result? We will include this fix in the next update v8.1.9 in a few weeks.
Regards.
Hi, thanks for the answer but now I add the code as you indicate, and it gives me this error
Uncaught TypeError: menu.on is not a function
at scripts.bundle.js:303:30
at Array.map (<anonymous>)
at createSelect2 (scripts.bundle.js:273:18)
at Object.init (scripts.bundle.js:715:13)
at Object.init (scripts.bundle.js:10:19)
at HTMLDocument.<anonymous> (scripts.bundle.js:28:16)
js error line image:
https://ibb.co/DYcbXTZ
Hi,
Sure we will check it further. May I know your Metronic version? Can you try it with the latest Metronic v8.1.8 ?
Regards.
Hi,
Just an update on this bug report. We will be releasing Metronic v8.1.9 update in a few days and a fix for this bug will be included as well.
Regards.
