KTSelect input on KTDrawer not working
I am using Metronic, Tailwind, and Laravel. As explained in the documentation, I copied the assets folder to the public directory. However, the KTSelect functionality inside KTDrawer is not working. I need to re-initialize it, but I couldn't find how to do it.
Replies (4)
Hi
Could you please try this solution? I posted here for a similar issue.
https://github.com/keenthemes/ktui/issues/17
Thanks
Hi
Use dropdownContainer: 'body' (Recommended). By telling the KTSelect component to render its dropdown menu as a direct child of the <body> tag, detach it from the drawer's container. This completely avoids the positioning, clipping, and visibility issues that can happen when a dropdown is inside a hidden or scrolling container.
You can implement this with either JavaScript or HTML data attributes.
With JavaScript:
// Make sure this code runs after the DOM is fully loaded
document.addEventListener("DOMContentLoaded", function() {
// Select the element, e.g., by its ID
const selectElement = document.querySelector("#mySelectInDrawer");
if (selectElement) {
// Initialize KTSelect and set the dropdown"s container to "body"
KTSelect.getOrCreateInstance(selectElement, {
dropdownContainer: "body"
});
}
});you can set this directly in your HTML
<!-- Use a data attribute to set the dropdown container -->
<select
class="form-select"
data-kt-select="true"
data-kt-select-dropdown-container="body"
>
<option>Select option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
I’m running into a “KTSelect.getOrCreateInstance is not a function” error when I try to initialize KTSelect. Here’s my code:
<select
class="kt-select"
data-kt-select="true"
data-kt-select-placeholder="Seçiniz"
data-kt-select-multiple="true"
data-kt-select-config='{
"optionsClass": "kt-scrollable overflow-auto max-h-[250px]"
}'>
</select>
const districtEl = document.querySelector("#districtSelect");
var districtSelect = KTSelect.getOrCreateInstance(districtEl, {
placeholder: 'Åžehir seçiniz',
enableSearch: true,
searchPlaceholder: 'Ara...'
});
console error: KTSelect.getOrCreateInstance is not a function
I have already:
Included the Metronic/Tailwind KTSelect script and CSS before this code.
Verified that the <select> element and its data-kt-select attributes are correct.
Could you help me understand:
Why getOrCreateInstance isn’t available on KTSelect?
If the API has changed, what’s the new initialization method?
Any other common pitfalls I might be missing?
i have same problem. Uncaught TypeError: KTSelect.getOrCreateInstance is not a function
document.addEventListener('livewire:init', () => {
const initTaxOfficeSelect = () => {
setTimeout(() => {
const selectElement = document.querySelector("#tax_office");
if (selectElement && typeof KTSelect !== 'undefined' && typeof KTSelect.getOrCreateInstance === 'function') {
KTSelect.getOrCreateInstance(selectElement, {
dropdownContainer: "body"
});
}
}, 0);
};
initTaxOfficeSelect();
Livewire.hook('message.processed', (message, component) => {
initTaxOfficeSelect();
});
});
