New Metronic Docs!Added Integration Docs with Starter Kits Apps for Laravel, Laravel Livewire, Angular, Vue, Symfony, Blazor Server, Django & Flask & more
Browse Docs

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.


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

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();
});
});


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(