We are experiencing a persistent issue with the KTSelect component when it's placed inside a KTDrawer that is hidden on the initial page load. The drawer's content is rendered by a Laravel Livewire component.

The Problem: When the KTDrawer is opened, the KTSelect dropdown does not render correctly. Instead of appearing attached to the select input, its dropdown HTML (<div data-kt-select-dropdown...) is appended to the bottom of the tag. This causes it to be visually detached, incorrectly positioned, and hidden behind the drawer's backdrop overlay.

Environment:

• Laravel
• Laravel Livewire
• Latest version of KeenThemes Metronic Tailwind

Steps to Reproduce:

1. Create a Livewire component that renders a KTDrawer. The drawer should be hidden by default (e.g., using the hidden class).
2. Inside the drawer's HTML, place a standard KTSelect component.
3. Use a button on the page to open the drawer. The opening is triggered by a Livewire event, which then calls the KTDrawer.getInstance(el).show() JavaScript function.
4. When the drawer opens, the KTSelect component is visible, but clicking on it reveals the bug.

Observed Behavior: The kt-select-dropdown element is created at the end of the , outside of the drawer and its wrapper. It is not positioned correctly relative to the select input.

Expected Behavior: The kt-select-dropdown element should be rendered within the kt-select-wrapper or positioned correctly by Popper.js, appearing directly below the select input and above the drawer's content and backdrop.

Attempted Solutions

We have tried multiple client-side solutions to fix this, but none have worked. Our core problem seems to be that a global script initializes the KTSelect component on initial page load while its parent drawer is hidden (display: none), leading to a broken state.

Here is a summary of what we've tried:

1. Re-initializing on Drawer Open: We used a Livewire event (drawer-opened) to trigger JavaScript after the drawer was shown.

• Attempt: Calling KTComponents.init() or new KTSelect(element) after the drawer was visible.
• Result: This had no effect, seemingly because a broken instance of the component already existed from the initial page load.

2. Setting data-kt-select-dropdown-container:

• Attempt: We set data-kt-select-dropdown-container to the drawer's ID (e.g., "#my_drawer").
• Result: The dropdown was still appended to the , ignoring the container attribute, likely due to the broken initial state.

3. Destroying the Instance (Destroy and Recreate):

• Attempt: We tried to destroy the existing instance before creating a new one. 1 if (el.instance) { 2 el.instance.destroy(); // FAILED 3 } 4 new KTSelect(el);
• Result: This failed with a JavaScript error: Uncaught TypeError: el.instance.destroy is not a function. This suggests either the instance object doesn't have a destroy method, or the instance itself was not a valid KTSelect object to begin with.

4. Deferred Initialization (Hiding from Global Scripts): Our final attempt was to prevent the global initialization script from finding the component in the first place.

• Attempt: We changed the select element's attributes from class="kt-select" and data-kt-select="true" to class="kt-select-deferred" and data-kt-select-deferred="true". When the drawer opened, our custom script would revert these attributes to their original state and then call new KTSelect(el).
• Result: This still failed. The dropdown was still created at the bottom of the on initial page load. This is the strongest evidence that a global script is aggressively finding the component, possibly by just the select tag name or another identifier, and initializing it regardless of our attempts to "hide" it.

Example Code

Blade / Livewire View:

1 <div>
2     <!-- Button to trigger the drawer -->
3     <button type="button" class="btn btn-primary" wire:click="openDrawerAndReinit">
4         Open Drawer
5     </button>
6 
7     <!-- The Drawer (hidden by default) -->
8     <div id="example_form_drawer" class="kt-drawer" wire:ignore.self>
9 

10 11