KTSelect.getOrCreateInstance is not a function
I’m running into a “KTSelect.getOrCreateInstance is not a function” error when I try to initialize KTSelect. Here’s my code:
<select id="districtSelect"
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...'
});
Replies (1)
Hi
KTSelect attaches its instance to the DOM element as element.instance.
Best practice:
- Before creating a new instance, check if
element.instanceexists and is aKTSelectinstance. - If not, create a new one.
Example:
<pre> const districtEl = document.querySelector("#districtSelect"); let districtSelect = districtEl.instance; if (!districtSelect) { districtSelect = new KTSelect(districtEl, { placeholder: 'Şehir seçiniz', enableSearch: true, searchPlaceholder: 'Ara...' }); } </pre>To avoids double-initialize and the error, You can create your helper:
<pre> function getOrCreateKTSelect(element, config) { if (!element.instance) { element.instance = new KTSelect(element, config); } return element.instance; } </pre>
ReUI
Open-source React components, blocks and templates built on shadcn/ui and Tailwind CSS by Keenthemes.
