Thanks! Really appreciate your sharing the solution with everyone.

Hi Faizal,

I got the error:

TypeError: Cannot read properties of undefined (reading 'querySelector')

However, I put the following code in the main javascritp file and all is good:

["mousedown", "click"].forEach(evt => {
document.addEventListener(evt, function (e) {
if (e.target.matches('input[data-kt-select-search="true"]')) {
e.stopImmediatePropagation();
return;
}
}, { capture: true });
});

Hopefully it will be helpful for someone else as well.

Thank you for your support!

Hi

This could be event handling conflicts or focus management problems.

Please try with this code

drawerBody.querySelectorAll("select.kt-select[data-kt-select]").forEach(sel => {
 sel.setAttribute("data-kt-select-dropdown-container", "body");
 const select = new KTSelect(sel, {
 dropdownContainer: "body",
 enableSearch: true
 });

 // Prevent the search input from closing the dropdown
 const searchInput = select.element.querySelector("input[type="text"]");
 if (searchInput) {
 searchInput.addEventListener("click", (e) => {
 e.stopPropagation();
 });
 searchInput.addEventListener("focus", (e) => {
 e.stopPropagation();
 });
 }
});

Hi Faizal,

Thanks for the answer. After I load the drawer content using ajax, I set the attribute as you suggested and now the dropdown works fine.

drawerBody.querySelectorAll('select.kt-select[data-kt-select]').forEach(sel => {
sel.setAttribute('data-kt-select-dropdown-container', 'body');
new KTSelect(sel, {
dropdownContainer: 'body',
enableSearch: true
});
});

However, when I want to search, the moment I click the search section the dropdown disappears.

Thanks,

Hi

This is a known issue with KTSelect components in hidden containers. The problem occurs because the dropdown gets clipped or hidden by the parent container's overflow styles.

Use the dropdownContainer: 'body' option - the dropdown will be appended to the document body instead of the parent container, preventing visibility issues.

data-kt-select-dropdown-container="body"