@keenthemes/ktui 1.1.1 → 1.1.3

package/dist/ktui.js

@@ -173,6 +173,15 @@ var __extends = (this && this.__extends) || (function () {
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
 })();
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.KTDrawer = void 0;
 var data_1 = __webpack_require__(8716);
@@ -205,8 +214,9 @@ var KTDrawer = /** @class */ (function (_super) {
         _this._isTransitioning = false;
         _this._backdropElement = null;
         _this._relatedTarget = null;
-        if (data_1.default.has(element, _this._name))
+        if (data_1.default.has(element, _this._name)) {
             return _this;
+        }
         _this._init(element);
         _this._buildConfig(config);
         _this._handleClose();
@@ -248,6 +258,27 @@ var KTDrawer = /** @class */ (function (_super) {
             return;
         }
         KTDrawer.hide();
+        // If drawer needs to be in front of backdrop, ensure it's in body (for proper z-index stacking)
+        // This ensures the drawer and backdrop are in the same stacking context
+        if (this._getOption('container') === 'body' && this._element.parentElement !== document.body) {
+            // Store original parent for restoration when hiding
+            if (!this._element.hasAttribute('data-kt-drawer-original-parent-id')) {
+                var originalParent = this._element.parentElement;
+                if (originalParent && originalParent !== document.body) {
+                    this._element.setAttribute('data-kt-drawer-original-parent-id', originalParent.id || '');
+                    // Store a reference to find the parent later (using closest to find Livewire component or header)
+                    var livewireComponent = originalParent.closest('[wire\\:id]');
+                    var header = originalParent.closest('header#header');
+                    if (livewireComponent) {
+                        this._element.setAttribute('data-kt-drawer-original-wire-id', livewireComponent.getAttribute('wire:id') || '');
+                    }
+                    if (header) {
+                        this._element.setAttribute('data-kt-drawer-original-in-header', 'true');
+                    }
+                }
+            }
+            document.body.appendChild(this._element);
+        }
         if (this._getOption('backdrop') === true)
             this._createBackdrop();
         if (relatedTarget)
@@ -312,6 +343,9 @@ var KTDrawer = /** @class */ (function (_super) {
             _this._element.classList.add(_this._getOption('hiddenClass'));
             _this._element.classList.remove(_this._getOption('shownClass'));
             _this._element.style.zIndex = '';
+            // Note: We don't move drawer back to original location here
+            // Livewire will handle DOM structure on next navigation, and drawer will be reinitialized
+            // in its original location from the persisted component HTML
             _this._fireEvent('hidden');
             _this._dispatchEvent('hidden');
         });
@@ -331,7 +365,25 @@ var KTDrawer = /** @class */ (function (_super) {
         var _a;
         if (this._getOption('container')) {
             if (this._getOption('container') === 'body') {
-                document.body.appendChild(this._element);
+                // Check if drawer is in a persisted Livewire component (like header with @persist)
+                // If so, don't move it to body - keep it in place so Livewire can preserve it
+                // This follows the same pattern as dropdowns/menus which work with wire:navigate
+                var originalParent = this._element.parentNode;
+                var isInPersistedComponent = originalParent &&
+                    (originalParent.closest('[wire\\:id]') !== null ||
+                        originalParent.closest('header#header') !== null);
+                if (isInPersistedComponent) {
+                    // Don't move to body - keep in original location for Livewire persistence
+                    // Use fixed positioning to achieve the same visual effect
+                    // Ensure drawer has fixed positioning to work from its current location
+                    if (!this._element.style.position || this._element.style.position === 'static') {
+                        this._element.style.position = 'fixed';
+                    }
+                }
+                else {
+                    // Not in persisted component - safe to move to body (follows original behavior)
+                    document.body.appendChild(this._element);
+                }
             }
             else {
                 (_a = document
@@ -402,14 +454,117 @@ var KTDrawer = /** @class */ (function (_super) {
     KTDrawer.prototype.isEnabled = function () {
         return this._isEnabled();
     };
+    KTDrawer.getElement = function (reference) {
+        if (reference && reference.hasAttribute('data-kt-drawer-initialized'))
+            return reference;
+        var findElement = reference &&
+            reference.closest('[data-kt-drawer-initialized]');
+        if (findElement)
+            return findElement;
+        // Fallback: look for parent with data-kt-drawer attribute
+        if (reference) {
+            var drawerContainer = reference.closest('[data-kt-drawer]');
+            if (drawerContainer)
+                return drawerContainer;
+        }
+        // If reference is a toggle button with a selector, find the drawer by selector
+        // This handles cases where the toggle button is not a child of the drawer
+        if (reference && reference.hasAttribute('data-kt-drawer-toggle')) {
+            var selector = reference.getAttribute('data-kt-drawer-toggle');
+            if (selector) {
+                // Check both document and body (drawers with container="body" are moved to body)
+                var drawerElInDoc = document.querySelector(selector);
+                var drawerElInBody = document.body.querySelector(selector);
+                var drawerEl = drawerElInDoc || drawerElInBody;
+                if (drawerEl)
+                    return drawerEl;
+            }
+        }
+        return null;
+    };
+    /**
+     * Wait for an element to appear in the DOM using polling with MutationObserver fallback
+     * Useful for persisted Livewire components that may not be in DOM immediately
+     */
+    KTDrawer.waitForElement = function (selector, timeout) {
+        if (timeout === void 0) { timeout = 2000; }
+        return new Promise(function (resolve) {
+            var resolved = false;
+            var doResolve = function (element) {
+                if (!resolved) {
+                    resolved = true;
+                    resolve(element);
+                }
+            };
+            // Check if element already exists
+            var existing = document.querySelector(selector) || document.body.querySelector(selector);
+            if (existing) {
+                doResolve(existing);
+                return;
+            }
+            // Use polling for faster detection (check every 50ms)
+            var attempts = 0;
+            var maxAttempts = timeout / 50;
+            var pollInterval = setInterval(function () {
+                if (resolved) {
+                    clearInterval(pollInterval);
+                    return;
+                }
+                attempts++;
+                var element = document.querySelector(selector) || document.body.querySelector(selector);
+                if (element) {
+                    clearInterval(pollInterval);
+                    doResolve(element);
+                    return;
+                }
+                if (attempts >= maxAttempts) {
+                    clearInterval(pollInterval);
+                    doResolve(null);
+                }
+            }, 50);
+            // Also use MutationObserver as backup for immediate detection
+            var observer = new MutationObserver(function () {
+                if (resolved) {
+                    observer.disconnect();
+                    return;
+                }
+                var element = document.querySelector(selector) || document.body.querySelector(selector);
+                if (element) {
+                    clearInterval(pollInterval);
+                    observer.disconnect();
+                    doResolve(element);
+                }
+            });
+            observer.observe(document.body, {
+                childList: true,
+                subtree: true,
+            });
+            // Cleanup on timeout
+            setTimeout(function () {
+                if (!resolved) {
+                    clearInterval(pollInterval);
+                    observer.disconnect();
+                    doResolve(null);
+                }
+            }, timeout);
+        });
+    };
     KTDrawer.getInstance = function (element) {
         if (!element)
             return null;
-        if (data_1.default.has(element, 'drawer')) {
-            return data_1.default.get(element, 'drawer');
+        var drawerElement = KTDrawer.getElement(element);
+        if (!drawerElement) {
+            // If element is a toggle button and drawer element wasn't found, return null
+            // The handleToggle() will handle waiting for the element to appear
+            if (element.hasAttribute('data-kt-drawer-toggle')) {
+            }
+            return null;
         }
-        if (element.getAttribute('data-kt-drawer-initialized') === 'true') {
-            return new KTDrawer(element);
+        if (data_1.default.has(drawerElement, 'drawer')) {
+            return data_1.default.get(drawerElement, 'drawer');
+        }
+        if (drawerElement.getAttribute('data-kt-drawer-initialized') === 'true') {
+            return new KTDrawer(drawerElement);
         }
         return null;
     };
@@ -442,16 +597,62 @@ var KTDrawer = /** @class */ (function (_super) {
         });
     };
     KTDrawer.handleToggle = function () {
+        // Add raw click listener to document.body to track all clicks
+        document.body.addEventListener('click', function (rawEvent) {
+            var target = rawEvent.target;
+            if (target && target.hasAttribute('data-kt-drawer-toggle')) {
+            }
+        }, true); // Use capture phase to catch before any stopPropagation
         event_handler_1.default.on(document.body, '[data-kt-drawer-toggle]', 'click', function (event, target) {
+            var _a;
             event.stopPropagation();
             var selector = target.getAttribute('data-kt-drawer-toggle');
             if (!selector)
                 return;
-            var drawerEl = document.querySelector(selector);
-            var drawer = KTDrawer.getInstance(drawerEl);
+            // Try to get instance immediately
+            var drawer = KTDrawer.getInstance(target);
             if (drawer) {
                 drawer.toggle();
             }
+            else {
+                // Drawer element not found - wait for it to appear (handles persisted Livewire components)
+                // Check if drawer exists in persisted components (might be in header that's persisted)
+                var persistedHeader = ((_a = document.querySelector('[wire\\:id]')) === null || _a === void 0 ? void 0 : _a.closest('[wire\\:id]')) || document.querySelector('header#header');
+                var drawerInPersisted = persistedHeader ? persistedHeader.querySelector(selector) : null;
+                // Wait longer for persisted components that may take time to render
+                // Also check if drawer exists in persisted header component
+                KTDrawer.waitForElement(selector, 5000).then(function (drawerElement) {
+                    if (drawerElement) {
+                        // Initialize the drawer if not already initialized
+                        if (!data_1.default.has(drawerElement, 'drawer')) {
+                            new KTDrawer(drawerElement);
+                        }
+                        // Get instance and toggle
+                        var drawerInstance = KTDrawer.getInstance(drawerElement);
+                        if (drawerInstance) {
+                            drawerInstance.toggle();
+                        }
+                    }
+                    else {
+                        // Drawer never appeared - trigger a reinit to see if it helps
+                        // This handles cases where drawers are in persisted components that haven't rendered yet
+                        setTimeout(function () {
+                            KTDrawer.reinit();
+                            // Try one more time after reinit
+                            var drawerAfterReinit = document.querySelector(selector) || document.body.querySelector(selector);
+                            if (drawerAfterReinit) {
+                                if (!data_1.default.has(drawerAfterReinit, 'drawer')) {
+                                    new KTDrawer(drawerAfterReinit);
+                                }
+                                var drawerInstance = KTDrawer.getInstance(drawerAfterReinit);
+                                if (drawerInstance) {
+                                    drawerInstance.toggle();
+                                }
+                            }
+                        }, 500);
+                    }
+                });
+            }
         });
     };
     KTDrawer.handleDismiss = function () {
@@ -503,7 +704,12 @@ var KTDrawer = /** @class */ (function (_super) {
         });
     };
     KTDrawer.createInstances = function () {
-        var elements = document.querySelectorAll('[data-kt-drawer]');
+        // Find all drawer elements - check both document and body (drawers with container="body" are moved there)
+        var elementsInDoc = document.querySelectorAll('[data-kt-drawer]');
+        var elementsInBody = document.body.querySelectorAll('[data-kt-drawer]');
+        // Combine and deduplicate
+        var allElements = new Set(__spreadArray(__spreadArray([], Array.from(elementsInDoc), true), Array.from(elementsInBody), true));
+        var elements = Array.from(allElements);
         elements.forEach(function (element) {
             new KTDrawer(element);
         });
@@ -519,6 +725,46 @@ var KTDrawer = /** @class */ (function (_super) {
             window.KT_DRAWER_INITIALIZED = true;
         }
     };
+    /**
+     * Force reinitialization of drawers by clearing KTData entries.
+     * Useful for Livewire wire:navigate where persisted elements need reinitialization.
+     */
+    KTDrawer.reinit = function () {
+        // Follow the same simple pattern as KTDropdown.reinit()
+        // Find all drawer elements - check both document and body (some may be moved to body)
+        var elementsInDoc = document.querySelectorAll('[data-kt-drawer]');
+        var elementsInBody = document.body.querySelectorAll('[data-kt-drawer]');
+        // Combine and deduplicate
+        var allElements = new Set(__spreadArray(__spreadArray([], Array.from(elementsInDoc), true), Array.from(elementsInBody), true));
+        var elements = Array.from(allElements);
+        // Clean up existing instances
+        elements.forEach(function (element) {
+            try {
+                // Get existing instance to clean up
+                var instance = KTDrawer.getInstance(element);
+                if (instance && typeof instance.hide === 'function') {
+                    instance.hide(); // This will clean up backdrop and state
+                }
+                // Clear KTData entries
+                var hadDrawer = data_1.default.has(element, 'drawer');
+                data_1.default.remove(element, 'drawer');
+                // Remove initialization attribute to allow fresh initialization
+                element.removeAttribute('data-kt-drawer-initialized');
+            }
+            catch (e) {
+                // Ignore errors for individual elements
+            }
+        });
+        // Now create fresh instances
+        KTDrawer.createInstances();
+        // Always ensure handlers are set up (similar to KTMenu.init() behavior)
+        // Event handlers use delegation so they persist, but we ensure they're attached
+        KTDrawer.handleToggle();
+        KTDrawer.handleDismiss();
+        KTDrawer.handleResize();
+        KTDrawer.handleClickAway();
+        KTDrawer.handleKeyword();
+    };
     return KTDrawer;
 }(component_1.default));
 exports.KTDrawer = KTDrawer;
@@ -1929,6 +2175,28 @@ var KTComponent = /** @class */ (function () {
         this._uid = null;
         this._element = null;
     }
+    /**
+     * Check if component should skip initialization
+     * Returns true if element already has an instance and is still connected to DOM
+     * Returns false if element should be initialized (no instance or disconnected)
+     * @param element The element to check
+     * @returns true if initialization should be skipped, false otherwise
+     */
+    KTComponent.prototype._shouldSkipInit = function (element) {
+        if (!data_1.default.has(element, this._name)) {
+            return false;
+        }
+        var existingInstance = data_1.default.get(element, this._name);
+        // If element is not connected to DOM, dispose old instance and allow reinitialization
+        if (element.isConnected === false) {
+            if (existingInstance && typeof existingInstance.dispose === 'function') {
+                existingInstance.dispose();
+            }
+            return false;
+        }
+        // Element is connected and has instance, skip initialization
+        return true;
+    };
     KTComponent.prototype._init = function (element) {
         element = dom_1.default.getElement(element);
         if (!element) {
@@ -2307,8 +2575,12 @@ var KTSticky = /** @class */ (function (_super) {
         };
         _this._config = _this._defaultConfig;
         _this._targetElement = null;
-        if (data_1.default.has(element, _this._name))
+        _this._resizeHandler = null;
+        _this._scrollHandler = null;
+        // Check if element already has an instance and is still connected
+        if (_this._shouldSkipInit(element)) {
             return _this;
+        }
         _this._init(element);
         _this._buildConfig(config);
         _this._releaseElement = dom_1.default.getElement(_this._getOption('release'));
@@ -2334,15 +2606,26 @@ var KTSticky = /** @class */ (function (_super) {
     };
     KTSticky.prototype._handlers = function () {
         var _this = this;
-        window.addEventListener('resize', function () {
+        // Store resize handler reference for cleanup
+        this._resizeHandler = function () {
             var timer;
             utils_1.default.throttle(timer, function () {
                 _this._update();
             }, 200);
-        });
-        this._targetElement.addEventListener('scroll', function () {
+        };
+        window.addEventListener('resize', this._resizeHandler);
+        // Store scroll handler reference for cleanup
+        this._scrollHandler = function () {
             _this._process();
-        });
+        };
+        if (this._targetElement) {
+            if (this._targetElement === document) {
+                window.addEventListener('scroll', this._scrollHandler);
+            }
+            else {
+                this._targetElement.addEventListener('scroll', this._scrollHandler);
+            }
+        }
     };
     KTSticky.prototype._process = function () {
         var reverse = this._getOption('reverse');
@@ -2583,6 +2866,30 @@ var KTSticky = /** @class */ (function (_super) {
     KTSticky.prototype.isActive = function () {
         return this._isActive();
     };
+    KTSticky.prototype.dispose = function () {
+        // Remove resize event listener
+        if (this._resizeHandler) {
+            window.removeEventListener('resize', this._resizeHandler);
+            this._resizeHandler = null;
+        }
+        // Remove scroll event listener
+        if (this._scrollHandler) {
+            if (this._targetElement === document) {
+                window.removeEventListener('scroll', this._scrollHandler);
+            }
+            else if (this._targetElement) {
+                this._targetElement.removeEventListener('scroll', this._scrollHandler);
+            }
+            this._scrollHandler = null;
+        }
+        // Clean up state
+        this._disable();
+        if (this._attributeRoot && document.body.hasAttribute(this._attributeRoot)) {
+            document.body.removeAttribute(this._attributeRoot);
+        }
+        // Call parent dispose to clean up data attributes and KTData
+        _super.prototype.dispose.call(this);
+    };
     KTSticky.getInstance = function (element) {
         if (!element)
             return null;
@@ -2678,8 +2985,6 @@ var KTSelectRemote = /** @class */ (function () {
         this._lastQuery = query || '';
         this._currentPage = page;
         var url = this._buildUrl(query, page);
-        if (this._config.debug)
-            console.log('Fetching remote data from:', url);
         // Dispatch search start event
         this._dispatchEvent('remoteSearchStart');
         return fetch(url)
@@ -2766,24 +3071,16 @@ var KTSelectRemote = /** @class */ (function () {
     KTSelectRemote.prototype._processData = function (data) {
         var _this = this;
         try {
-            if (this._config.debug)
-                console.log('Processing API response:', data);
             var processedData = data;
             // Extract data from the API property if specified
             if (this._config.apiDataProperty && data[this._config.apiDataProperty]) {
-                if (this._config.debug)
-                    console.log("Extracting data from property: ".concat(this._config.apiDataProperty));
                 // If pagination metadata is available, extract it
                 if (this._config.pagination) {
                     if (data.total_pages) {
                         this._totalPages = data.total_pages;
-                        if (this._config.debug)
-                            console.log("Total pages found: ".concat(this._totalPages));
                     }
                     if (data.total) {
                         this._totalPages = Math.ceil(data.total / (this._config.paginationLimit || 10));
-                        if (this._config.debug)
-                            console.log("Calculated total pages: ".concat(this._totalPages, " from total: ").concat(data.total));
                     }
                 }
                 processedData = data[this._config.apiDataProperty];
@@ -2793,8 +3090,6 @@ var KTSelectRemote = /** @class */ (function () {
                 console.warn('Remote data is not an array:', processedData);
                 return [];
             }
-            if (this._config.debug)
-                console.log("Mapping ".concat(processedData.length, " items to KTSelectOptionData format"));
             // Map data to KTSelectOptionData format
             var mappedData = processedData.map(function (item) {
                 var mappedItem = _this._mapItemToOption(item);
@@ -2820,19 +3115,13 @@ var KTSelectRemote = /** @class */ (function () {
                     // If we found a value, verify it matches what was extracted
                     if (nestedValue !== null && nestedValue !== undefined) {
                         var expectedValue = String(nestedValue);
-                        if (_this._config.debug)
-                            console.log("Data path verification for [".concat(_this._config.dataValueField, "]: Expected: ").concat(expectedValue, ", Got: ").concat(mappedItem.id));
                         if (mappedItem.id !== expectedValue && expectedValue) {
                             console.warn("Value mismatch! Path: ".concat(_this._config.dataValueField, ", Expected: ").concat(expectedValue, ", Got: ").concat(mappedItem.id));
                         }
                     }
                 }
-                if (_this._config.debug)
-                    console.log("Mapped item: ".concat(JSON.stringify(mappedItem)));
                 return mappedItem;
             });
-            if (this._config.debug)
-                console.log("Returned ".concat(mappedData.length, " mapped items"));
             return mappedData;
         }
         catch (error) {
@@ -2848,14 +3137,9 @@ var KTSelectRemote = /** @class */ (function () {
      * @returns KTSelectOptionData object
      */
     KTSelectRemote.prototype._mapItemToOption = function (item) {
-        var _this = this;
         // Get the field mapping from config with fallbacks for common field names
         var valueField = this._config.dataValueField || 'id';
         var labelField = this._config.dataFieldText || 'title';
-        if (this._config.debug)
-            console.log("Mapping fields: value=".concat(valueField, ", label=").concat(labelField));
-        if (this._config.debug)
-            console.log('Item data:', JSON.stringify(item).substring(0, 200) + '...'); // Trimmed for readability
         // Extract values using improved getValue function
         var getValue = function (obj, path) {
             if (!path || !obj)
@@ -2873,13 +3157,6 @@ var KTSelectRemote = /** @class */ (function () {
                     }
                     result_1 = result_1[part];
                 }
-                // Log the extraction result
-                if (_this._config.debug)
-                    console.log("Extracted [".concat(path, "] => ").concat(result_1 !== null && result_1 !== undefined
-                        ? typeof result_1 === 'object'
-                            ? JSON.stringify(result_1).substring(0, 50)
-                            : String(result_1).substring(0, 50)
-                        : 'null'));
                 return result_1;
             }
             catch (error) {
@@ -2896,8 +3173,6 @@ var KTSelectRemote = /** @class */ (function () {
                 var field = fallbackFields_1[_i];
                 if (item[field] !== null && item[field] !== undefined) {
                     id = String(item[field]);
-                    if (this._config.debug)
-                        console.log("Using fallback field '".concat(field, "' for ID: ").concat(id));
                     break;
                 }
             }
@@ -2908,8 +3183,6 @@ var KTSelectRemote = /** @class */ (function () {
         // If still no ID, generate one
         if (!id) {
             id = "option-".concat(Math.random().toString(36).substr(2, 9));
-            if (this._config.debug)
-                console.log("Generated fallback ID: ".concat(id));
         }
         // Get label with proper fallbacks
         var title = getValue(item, labelField);
@@ -2927,8 +3200,6 @@ var KTSelectRemote = /** @class */ (function () {
                 var field = fallbackFields_2[_a];
                 if (item[field] !== null && item[field] !== undefined) {
                     title = String(item[field]);
-                    if (this._config.debug)
-                        console.log("Using fallback field '".concat(field, "' for title: ").concat(title));
                     break;
                 }
             }
@@ -2939,8 +3210,6 @@ var KTSelectRemote = /** @class */ (function () {
         // If still no title, use ID as fallback
         if (!title) {
             title = "Option ".concat(id);
-            if (this._config.debug)
-                console.log("Using ID as fallback title: ".concat(title));
         }
         // Create the option object with consistent structure
         var result = {
@@ -2949,8 +3218,6 @@ var KTSelectRemote = /** @class */ (function () {
             selected: Boolean(item.selected),
             disabled: Boolean(item.disabled),
         };
-        if (this._config.debug)
-            console.log('Final mapped item:', JSON.stringify(result));
         return result;
     };
     /**
@@ -5783,13 +6050,14 @@ var KTEventHandler = {
         }
         var eventId = utils_1.default.geUID('event');
         KTDelegatedEventHandlers[eventId] = function (event) {
-            var targets = element.querySelectorAll(selector);
+            // Fix: Check selector dynamically instead of pre-computing targets
+            // This allows event delegation to work with dynamically added elements
             var target = event.target;
             while (target && target !== element) {
-                for (var i = 0, j = targets.length; i < j; i++) {
-                    if (target === targets[i]) {
-                        handler.call(_this, event, target);
-                    }
+                // Check if current target matches the selector
+                if (target.matches && target.matches(selector)) {
+                    handler.call(_this, event, target);
+                    return; // Stop bubbling once we've handled it
                 }
                 target = target.parentNode;
             }
@@ -6150,8 +6418,6 @@ var KTSelectCombobox = /** @class */ (function () {
             _this._toggleClearButtonVisibility(_this._searchInputElement.value);
             // this._select.showAllOptions(); // showAllOptions might be too broad, filtering is managed by typing.
         });
-        if (this._config.debug)
-            console.log('KTSelectCombobox initialized');
     }
     /**
      * Attach event listeners specific to combobox
@@ -8132,7 +8398,13 @@ var KTDataTable = /** @class */ (function (_super) {
      * @returns The KTDataTable instance or undefined if not found
      */
     KTDataTable.getInstance = function (element) {
-        return this._instances.get(element);
+        // First check the static Map (for instances created via createInstances)
+        var instanceFromMap = this._instances.get(element);
+        if (instanceFromMap) {
+            return instanceFromMap;
+        }
+        // Fallback to element's instance property (for manually created instances)
+        return element.instance;
     };
     /**
      * Initializes all KTDataTable instances on the page.
@@ -8643,8 +8915,6 @@ var KTSelectDropdown = /** @class */ (function (_super) {
         event.preventDefault();
         event.stopPropagation();
         if (this._config.disabled) {
-            if (this._config.debug)
-                console.log('KTSelectDropdown._handleToggleClick: select is disabled');
             return;
         }
         // Call KTSelect's methods
@@ -8818,8 +9088,6 @@ var KTSelectDropdown = /** @class */ (function (_super) {
     KTSelectDropdown.prototype.open = function () {
         var _this = this;
         if (this._config.disabled) {
-            if (this._config.debug)
-                console.log('KTSelectDropdown.open: select is disabled, not opening');
             return;
         }
         if (this._isOpen || this._isTransitioning)
@@ -8876,23 +9144,15 @@ var KTSelectDropdown = /** @class */ (function (_super) {
      */
     KTSelectDropdown.prototype.close = function () {
         var _this = this;
-        if (this._config.debug)
-            console.log('KTSelectDropdown.close called - isOpen:', this._isOpen, 'isTransitioning:', this._isTransitioning);
         if (!this._isOpen || this._isTransitioning) {
-            if (this._config.debug)
-                console.log('KTSelectDropdown.close - early return: dropdown not open or is transitioning');
             return;
         }
         // Events and ARIA will be handled by KTSelect
-        if (this._config.debug)
-            console.log('KTSelectDropdown.close - starting transition');
         this._isTransitioning = true;
         this._dropdownElement.style.opacity = '0';
         var transitionComplete = false;
         var fallbackTimer = setTimeout(function () {
             if (!transitionComplete) {
-                if (_this._config.debug)
-                    console.log('KTSelectDropdown.close - fallback timer triggered');
                 completeTransition();
             }
         }, 300);
@@ -8901,8 +9161,6 @@ var KTSelectDropdown = /** @class */ (function (_super) {
                 return;
             transitionComplete = true;
             clearTimeout(fallbackTimer);
-            if (_this._config.debug)
-                console.log('KTSelectDropdown.close - transition ended');
             _this._dropdownElement.classList.add('hidden');
             _this._dropdownElement.classList.remove('open');
             _this._toggleElement.classList.remove('active');
@@ -8911,8 +9169,6 @@ var KTSelectDropdown = /** @class */ (function (_super) {
             _this._isTransitioning = false;
             _this._isOpen = false;
             // Events will be handled by KTSelect
-            if (_this._config.debug)
-                console.log('KTSelectDropdown.close - visual part complete');
         };
         dom_1.default.transitionEnd(this._dropdownElement, completeTransition);
         if (dom_1.default.getCssProp(this._dropdownElement, 'transition-duration') === '0s') {
@@ -9292,8 +9548,6 @@ var KTSelectSearch = /** @class */ (function () {
         if (this._select.getConfig().enableSearch) {
             this._searchInput = this._select.getSearchInput();
             if (this._searchInput) {
-                if (this._config.debug)
-                    console.log('Initializing search module with input:', this._searchInput);
                 // First remove any existing listeners to prevent duplicates
                 this._removeEventListeners();
                 // Add the input event listener for filtering
@@ -9329,22 +9583,37 @@ var KTSelectSearch = /** @class */ (function () {
                     .getWrapperElement()
                     .addEventListener('dropdown.close', function () {
                     _this._focusManager.resetFocus();
-                    // If clearSearchOnClose is false and there's a value, the search term and filtered state should persist.
-                    // KTSelect's closeDropdown method already calls this._searchModule.clearSearch() (which clears highlights)
-                    // and conditionally clears the input value based on KTSelect's config.clearSearchOnClose.
-                    // This listener in search.ts seems to unconditionally clear everything.
-                    // For now, keeping its original behavior:
-                    _this.clearSearch(); // Clears highlights from current options
-                    _this._searchInput.value = ''; // Clears the search input field
-                    _this._resetAllOptions(); // Shows all options, restores original text, removes highlights
-                    _this._clearNoResultsMessage(); // Clears any "no results" message
+                    var config = _this._select.getConfig();
+                    // Clear highlights from current options (always do this)
+                    _this.clearSearch();
+                    // Respect clearSearchOnClose config option
+                    if (config.clearSearchOnClose) {
+                        // Clear the search input field
+                        _this._searchInput.value = '';
+                        // Reset all options to their original state
+                        _this._resetAllOptions();
+                        // Clear any "no results" message
+                        _this._clearNoResultsMessage();
+                    }
+                    else {
+                        // When clearSearchOnClose is false, preserve search text
+                        // The search input value is already preserved by KTSelect's closeDropdown method
+                        // Reset options visibility to show all (they will be re-filtered when dropdown reopens)
+                        _this._resetAllOptions();
+                        // Clear any "no results" message
+                        _this._clearNoResultsMessage();
+                        // Note: The search input value is preserved, so when dropdown reopens,
+                        // the dropdown.show listener will detect it and re-filter options accordingly
+                    }
                 });
                 // Clear highlights when an option is selected - ATTACH TO ORIGINAL SELECT (standard 'change' event)
                 this._select.getElement().addEventListener('change', function () {
                     _this.clearSearch();
-                    // Close dropdown only for single select mode
+                    // Close dropdown only for single select mode, and only if closeOnEnter is not false
                     // Keep dropdown open for multiple select mode to allow additional selections
-                    if (!_this._select.getConfig().multiple) {
+                    // Also respect closeOnEnter config when it's explicitly set to false
+                    var config = _this._select.getConfig();
+                    if (!config.multiple && config.closeOnEnter !== false) {
                         _this._select.closeDropdown();
                     }
                 });
@@ -9367,12 +9636,9 @@ var KTSelectSearch = /** @class */ (function () {
                         // 2. Clear any "no results" message.
                         _this._clearNoResultsMessage();
                     }
-                    // Handle autofocus for the search input (this was one of the original separate listeners)
+                    // Handle autofocus for the search input with retry mechanism
                     if (_this._select.getConfig().searchAutofocus) {
-                        setTimeout(function () {
-                            var _a;
-                            (_a = _this._searchInput) === null || _a === void 0 ? void 0 : _a.focus(); // Focus search input
-                        }, 50); // Delay to ensure dropdown is visible
+                        _this._focusSearchInputWithRetry();
                     }
                     _this._select.updateSelectAllButtonState();
                 });
@@ -9387,10 +9653,59 @@ var KTSelectSearch = /** @class */ (function () {
             this._eventManager.removeAllListeners(this._searchInput);
         }
     };
+    /**
+     * Focus the search input with retry mechanism for reliability
+     * Retries up to 3 times with exponential backoff (50ms, 100ms, 200ms)
+     */
+    KTSelectSearch.prototype._focusSearchInputWithRetry = function (attempt) {
+        var _this = this;
+        if (attempt === void 0) { attempt = 0; }
+        if (!this._searchInput) {
+            return;
+        }
+        var maxAttempts = 3;
+        var delays = [0, 50, 100, 200]; // Initial attempt + 3 retries
+        if (attempt > maxAttempts) {
+            if (this._config.debug) {
+                console.warn('KTSelect: Failed to focus search input after', maxAttempts, 'attempts');
+            }
+            return;
+        }
+        var delay = delays[attempt] || 200;
+        var focusAttempt = function () {
+            var _a;
+            try {
+                (_a = _this._searchInput) === null || _a === void 0 ? void 0 : _a.focus();
+                // Check if focus was successful
+                var isFocused = document.activeElement === _this._searchInput || _this._searchInput === document.activeElement;
+                if (isFocused) {
+                    // Focus successful
+                    return;
+                }
+                // Focus failed, retry if we haven't exceeded max attempts
+                if (attempt < maxAttempts) {
+                    _this._focusSearchInputWithRetry(attempt + 1);
+                }
+            }
+            catch (error) {
+                // Focus failed with error, retry if we haven't exceeded max attempts
+                if (attempt < maxAttempts) {
+                    _this._focusSearchInputWithRetry(attempt + 1);
+                }
+            }
+        };
+        if (delay === 0) {
+            focusAttempt();
+        }
+        else {
+            setTimeout(focusAttempt, delay);
+        }
+    };
     /**
      * Handles keydown events on the search input for navigation and actions.
      */
     KTSelectSearch.prototype._handleSearchKeyDown = function (event) {
+        var _this = this;
         var key = event.key;
         switch (key) {
             case ' ': // Spacebar
@@ -9408,14 +9723,26 @@ var KTSelectSearch = /** @class */ (function () {
                 break;
             case 'Enter':
                 event.preventDefault();
-                // Always attempt to select the first available option in the list.
-                // focusFirst() finds, focuses, and returns the first visible, non-disabled option.
                 var firstAvailableOption = this._focusManager.focusFirst();
                 if (firstAvailableOption) {
                     var optionValue = firstAvailableOption.getAttribute('data-value');
                     if (optionValue) {
-                        this._select.toggleSelection(optionValue);
-                        // KTSelect.toggleSelection handles closing the dropdown based on config.closeOnSelect and config.multiple
+                        var config = this._select.getConfig();
+                        var isAlreadySelected = !config.multiple && this._select.getSelectedOptions().includes(optionValue);
+                        var shouldClose = !config.multiple && config.closeOnEnter !== false;
+                        if (isAlreadySelected && shouldClose) {
+                            this._select.closeDropdown();
+                        }
+                        else {
+                            this._select.toggleSelection(optionValue);
+                        }
+                        // Focus display element after closing so user can press Enter again
+                        if (shouldClose) {
+                            setTimeout(function () {
+                                var _a;
+                                (_a = _this._select.getDisplayElement()) === null || _a === void 0 ? void 0 : _a.focus();
+                            }, 0);
+                        }
                     }
                 }
                 break;
@@ -9743,8 +10070,6 @@ var KTSelect = /** @class */ (function (_super) {
             _this._state
                 .setItems()
                 .then(function () {
-                if (_this._config.debug)
-                    console.log('Setting up component after remote data is loaded');
                 _this._setupComponent();
             })
                 .catch(function (error) {
@@ -9779,6 +10104,41 @@ var KTSelect = /** @class */ (function (_super) {
         // Cast to writable to allow assignment (config is readonly but needs initialization)
         this._config = __assign(__assign(__assign(__assign(__assign({}, this._defaultConfig), KTSelect.globalConfig), this._getGlobalConfig()), dom_1.default.getDataAttributes(this._element, this._dataOptionPrefix + this._name)), config);
     };
+    /**
+     * Override _dispatchEvent to also dispatch on document for global listeners (jQuery compatibility)
+     */
+    KTSelect.prototype._dispatchEvent = function (eventType, payload) {
+        if (payload === void 0) { payload = null; }
+        // Call parent method to dispatch on element (existing behavior)
+        _super.prototype._dispatchEvent.call(this, eventType, payload);
+        // Also dispatch on document if configured
+        var dispatchGlobalEvents = this._config.dispatchGlobalEvents !== false; // Default to true
+        if (dispatchGlobalEvents) {
+            // Create event detail structure
+            var eventDetail = {
+                payload: payload,
+                instance: this, // Include component instance reference
+                element: this._element, // Include element reference
+            };
+            // Dispatch non-namespaced event on document (for jQuery compatibility: $(document).on('show', ...))
+            var nonNamespacedEvent = new CustomEvent(eventType, {
+                detail: eventDetail,
+                bubbles: true,
+                cancelable: true,
+                composed: true, // Allow event to cross shadow DOM boundaries
+            });
+            document.dispatchEvent(nonNamespacedEvent);
+            // Also dispatch namespaced event on document (for namespaced listeners: $(document).on('kt-select:show', ...))
+            var namespacedEventType = "kt-select:".concat(eventType);
+            var namespacedEvent = new CustomEvent(namespacedEventType, {
+                detail: eventDetail,
+                bubbles: true,
+                cancelable: true,
+                composed: true, // Allow event to cross shadow DOM boundaries
+            });
+            document.dispatchEvent(namespacedEvent);
+        }
+    };
     /**
      * Initialize remote data fetching
      */
@@ -9786,8 +10146,6 @@ var KTSelect = /** @class */ (function (_super) {
         var _this = this;
         if (!this._remoteModule || !this._config.remote)
             return;
-        if (this._config.debug)
-            console.log('Initializing remote data with URL:', this._config.dataUrl);
         // For remote data, we need to create the HTML structure first
         // so that the component can be properly initialized
         this._createHtmlStructure();
@@ -9798,8 +10156,6 @@ var KTSelect = /** @class */ (function (_super) {
         this._remoteModule
             .fetchData()
             .then(function (items) {
-            if (_this._config.debug)
-                console.log('Remote data fetched:', items);
             // Remove placeholder/loading options before setting new items
             _this._clearExistingOptions();
             // Update state with fetched items
@@ -9808,8 +10164,6 @@ var KTSelect = /** @class */ (function (_super) {
                 .then(function () {
                 // Generate options from the fetched data
                 _this._generateOptionsHtml(_this._element);
-                if (_this._config.debug)
-                    console.log('Generating options HTML from remote data');
                 // Update the dropdown to show the new options
                 _this._updateDropdownWithNewOptions();
                 // Complete the component setup with the fetched data
@@ -9837,9 +10191,6 @@ var KTSelect = /** @class */ (function (_super) {
         var selectedOptions = Array.from(this._element.querySelectorAll('option[selected]:not([value=""])'));
         if (selectedOptions.length > 0) {
             this._preSelectedValues = selectedOptions.map(function (opt) { return opt.value; });
-            if (this._config.debug) {
-                console.log('Captured pre-selected values before clearing:', this._preSelectedValues);
-            }
         }
         // Keep only the empty/placeholder option and remove the rest
         var options = Array.from(this._element.querySelectorAll('option:not([value=""])'));
@@ -9898,9 +10249,6 @@ var KTSelect = /** @class */ (function (_super) {
         optionsContainer.appendChild(fragment);
         // Update options NodeList
         this._options = this._dropdownContentElement.querySelectorAll('[data-kt-select-option]');
-        if (this._config.debug) {
-            console.log("Rendered ".concat(optionsData.length, " options in dropdown"));
-        }
     };
     /**
      * Update dropdown with new options from the original select element
@@ -9925,9 +10273,6 @@ var KTSelect = /** @class */ (function (_super) {
         }
         // Apply pre-selected values captured before remote data was loaded
         if (this._preSelectedValues.length > 0) {
-            if (this._config.debug) {
-                console.log('Applying pre-selected values after remote data loaded:', this._preSelectedValues);
-            }
             // Get all available option values from the loaded remote data
             var availableValues_1 = Array.from(this._element.querySelectorAll('option')).map(function (opt) { return opt.value; });
             // Filter pre-selected values to only those that exist in remote data
@@ -9939,9 +10284,6 @@ var KTSelect = /** @class */ (function (_super) {
                 var valuesToSelect = this._config.multiple
                     ? validPreSelectedValues
                     : [validPreSelectedValues[0]];
-                if (this._config.debug) {
-                    console.log('Selecting matched values:', valuesToSelect);
-                }
                 // Get any existing selections from _preSelectOptions (e.g., data-kt-select-pre-selected)
                 var existingSelections = this._state.getSelectedOptions();
                 // Merge existing selections with native pre-selected values (no duplicates)
@@ -9958,9 +10300,6 @@ var KTSelect = /** @class */ (function (_super) {
                 this.updateSelectedOptionDisplay();
                 this._updateSelectedOptionClass();
             }
-            else if (this._config.debug) {
-                console.log('None of the pre-selected values matched remote data:', this._preSelectedValues);
-            }
             // Clear the pre-selected values array after processing
             this._preSelectedValues = [];
         }
@@ -10035,8 +10374,6 @@ var KTSelect = /** @class */ (function (_super) {
         // If dropdown is already created, show error message there
         this._showDropdownMessage('error', message);
         if (!this._wrapperElement) {
-            if (this._config.debug)
-                console.log('Setting up component after error');
             this._setupComponent();
         }
     };
@@ -10148,8 +10485,6 @@ var KTSelect = /** @class */ (function (_super) {
         });
         // Update options NodeList to include the new options
         this._options = this._dropdownContentElement.querySelectorAll("[data-kt-select-option]");
-        if (this._config.debug)
-            console.log("Added ".concat(newItems.length, " more options to dropdown"));
     };
     /**
      * ========================================================================
@@ -10288,10 +10623,18 @@ var KTSelect = /** @class */ (function (_super) {
             return;
         }
         // Get search input element - this is used for the search functionality
-        this._searchInputElement = this._dropdownContentElement.querySelector("[data-kt-select-search]");
-        // If not found in dropdown, check if it's the display element itself
+        // First try to find the actual input element (not the wrapper div)
+        this._searchInputElement = this._dropdownContentElement.querySelector("input[data-kt-select-search]");
+        // If not found, try the wrapper selector (for backward compatibility)
+        if (!this._searchInputElement) {
+            var searchWrapper = this._dropdownContentElement.querySelector("[data-kt-select-search]");
+            if (searchWrapper) {
+                this._searchInputElement = searchWrapper.querySelector('input');
+            }
+        }
+        // If still not found in dropdown, check if it's the display element itself (combobox mode)
         if (!this._searchInputElement) {
-            this._searchInputElement = this._displayElement;
+            this._searchInputElement = this._displayElement.querySelector('input[data-kt-select-search]');
         }
         this._selectAllButton = this._wrapperElement.querySelector('[data-kt-select-select-all]');
         // Cache the options container for performance
@@ -10357,8 +10700,6 @@ var KTSelect = /** @class */ (function (_super) {
     KTSelect.prototype._generateOptionsHtml = function (element) {
         var _this = this;
         var items = this._state.getItems() || [];
-        if (this._config.debug)
-            console.log("Generating options HTML from ".concat(items.length, " items"));
         // Only modify options if we have items to replace them with
         if (items && items.length > 0) {
             // Clear existing options except the first empty one
@@ -10386,9 +10727,6 @@ var KTSelect = /** @class */ (function (_super) {
                     label =
                         extractedLabel !== null ? String(extractedLabel) : 'Unnamed option';
                 }
-                // Log the extracted values for debugging
-                if (_this._config.debug)
-                    console.log("Option: value=".concat(value, ", label=").concat(label));
                 // Set option attributes
                 optionElement.value = value;
                 optionElement.textContent = label || 'Unnamed option';
@@ -10397,12 +10735,6 @@ var KTSelect = /** @class */ (function (_super) {
                 }
                 element.appendChild(optionElement);
             });
-            if (this._config.debug)
-                console.log("Added ".concat(items.length, " options to select element"));
-        }
-        else {
-            if (this._config.debug)
-                console.log('No items to generate options from');
         }
     };
     /**
@@ -10415,8 +10747,6 @@ var KTSelect = /** @class */ (function (_super) {
         var result = key
             .split('.')
             .reduce(function (o, k) { return (o && o[k] !== undefined ? o[k] : null); }, obj);
-        if (this._config.debug)
-            console.log("Extracting [".concat(key, "] from object => ").concat(result !== null ? JSON.stringify(result) : 'null'));
         return result;
     };
     /**
@@ -10449,55 +10779,79 @@ var KTSelect = /** @class */ (function (_super) {
      * Open the dropdown
      */
     KTSelect.prototype.openDropdown = function () {
+        var _this = this;
         if (this._config.disabled) {
-            if (this._config.debug)
-                console.log('openDropdown: select is disabled, not opening');
             return;
         }
-        if (this._config.debug)
-            console.log('openDropdown called, dropdownModule exists:', !!this._dropdownModule);
         if (!this._dropdownModule) {
-            if (this._config.debug)
-                console.log('Early return from openDropdown - module missing');
             return;
         }
         // Don't open dropdown if the select is disabled
         if (this._config.disabled) {
-            if (this._config.debug)
-                console.log('Early return from openDropdown - select is disabled');
             return;
         }
-        if (this._config.debug)
-            console.log('Opening dropdown via dropdownModule...');
+        // Global dropdown management: close other open dropdowns if configured
+        var closeOnOtherOpen = this._config.closeOnOtherOpen !== false; // Default to true
+        if (closeOnOtherOpen) {
+            // Close all other open dropdowns
+            var otherSelectsToClose_1 = [];
+            KTSelect.openDropdowns.forEach(function (otherSelect) {
+                var isOther = otherSelect !== _this;
+                var isOpen = otherSelect._dropdownIsOpen;
+                if (isOther && isOpen) {
+                    otherSelectsToClose_1.push(otherSelect);
+                }
+            });
+            otherSelectsToClose_1.forEach(function (otherSelect) {
+                otherSelect.closeDropdown();
+            });
+        }
         // Set our internal flag to match what we're doing
         this._dropdownIsOpen = true;
+        // Add to registry
+        KTSelect.openDropdowns.add(this);
         // Open the dropdown via the module
         this._dropdownModule.open();
-        // Dispatch custom event
+        // Dispatch custom events
         this._dispatchEvent('show');
         this._fireEvent('show');
+        // Dispatch dropdown.show event on wrapper for search module
+        var dropdownShowEvent = new CustomEvent('dropdown.show', {
+            bubbles: true,
+            cancelable: true,
+        });
+        this._wrapperElement.dispatchEvent(dropdownShowEvent);
         // Update ARIA states
         this._setAriaAttributes();
         // Update select all button state
         this.updateSelectAllButtonState();
         // Focus the first selected option or first option if nothing selected
-        this._focusSelectedOption();
+        // BUT: Skip this if search autofocus is enabled, as we want search input to get focus
+        if (!(this._config.enableSearch && this._config.searchAutofocus)) {
+            this._focusSelectedOption();
+        }
+        // Dispatch dropdown.show event on the wrapper element for search module
+        // Use requestAnimationFrame to ensure dropdown is visible and transition has started
+        requestAnimationFrame(function () {
+            requestAnimationFrame(function () {
+                if (_this._wrapperElement) {
+                    var dropdownShowEvent_1 = new CustomEvent('dropdown.show', {
+                        bubbles: true,
+                        cancelable: true,
+                    });
+                    _this._wrapperElement.dispatchEvent(dropdownShowEvent_1);
+                }
+            });
+        });
     };
     /**
      * Close the dropdown
      */
     KTSelect.prototype.closeDropdown = function () {
-        if (this._config.debug)
-            console.log('closeDropdown called, dropdownModule exists:', !!this._dropdownModule);
         // Only check if dropdown module exists, not dropdownIsOpen flag
         if (!this._dropdownModule) {
-            if (this._config.debug)
-                console.log('Early return from closeDropdown - module missing');
             return;
         }
-        // Always close by delegating to the dropdown module, which is the source of truth
-        if (this._config.debug)
-            console.log('Closing dropdown via dropdownModule...');
         // Clear search input if the dropdown is closing
         if (this._searchModule && this._searchInputElement) {
             // Clear search input if configured to do so
@@ -10509,19 +10863,25 @@ var KTSelect = /** @class */ (function (_super) {
         }
         // Set our internal flag to match what we're doing
         this._dropdownIsOpen = false;
+        // Remove from registry
+        KTSelect.openDropdowns.delete(this);
         // Call the dropdown module's close method
         this._dropdownModule.close();
         // Reset all focus states
         if (this._focusManager) {
             this._focusManager.resetFocus();
         }
-        // Dispatch custom events
+        // Dispatch custom events on the select element
         this._dispatchEvent('close');
         this._fireEvent('close');
+        // Dispatch dropdown.close event on wrapper for search module
+        var dropdownCloseEvent = new CustomEvent('dropdown.close', {
+            bubbles: true,
+            cancelable: true,
+        });
+        this._wrapperElement.dispatchEvent(dropdownCloseEvent);
         // Update ARIA states
         this._setAriaAttributes();
-        if (this._config.debug)
-            console.log('closeDropdown complete');
     };
     /**
      * Update dropdown position
@@ -10558,8 +10918,6 @@ var KTSelect = /** @class */ (function (_super) {
     KTSelect.prototype._selectOption = function (value) {
         // Prevent selection if the option is disabled (in dropdown or original select)
         if (this._isOptionDisabled(value)) {
-            if (this._config.debug)
-                console.log('_selectOption: Option is disabled, ignoring selection');
             return;
         }
         // Get current selection state
@@ -10688,8 +11046,6 @@ var KTSelect = /** @class */ (function (_super) {
         var selectedValues = this._state.getSelectedOptions();
         var maxReached = typeof this._config.maxSelections === 'number' &&
             selectedValues.length >= this._config.maxSelections;
-        if (this._config.debug)
-            console.log('Updating selected classes for options, selected values:', selectedValues);
         allOptions.forEach(function (option) {
             var optionValue = option.getAttribute('data-value');
             if (!optionValue)
@@ -10739,6 +11095,55 @@ var KTSelect = /** @class */ (function (_super) {
         this._dispatchEvent('change');
         this._fireEvent('change');
     };
+    /**
+     * Deselect a specific option by value
+     * @param value The value of the option to deselect
+     * @public
+     */
+    KTSelect.prototype.deselectOption = function (value) {
+        // Check if the option is currently selected
+        if (!this._state.isSelected(value)) {
+            return; // Already deselected
+        }
+        // For single-select mode, check if clearing is allowed
+        if (!this._config.multiple && !this._config.allowClear) {
+            return; // Cannot deselect in single-select mode unless allowClear is true
+        }
+        // Remove from selected options
+        if (this._config.multiple) {
+            // For multiple select, just toggle it off
+            this._state.toggleSelectedOptions(value);
+        }
+        else {
+            // For single select, clear all selections
+            this._state.setSelectedOptions([]);
+        }
+        // Update the native select element
+        var optionEl = Array.from(this._element.querySelectorAll('option')).find(function (opt) { return opt.value === value; });
+        if (optionEl) {
+            optionEl.selected = false;
+        }
+        // For single select, clear the native select value
+        if (!this._config.multiple) {
+            this._element.value = '';
+        }
+        // Update the display
+        this.updateSelectedOptionDisplay();
+        this._updateSelectedOptionClass();
+        // Update select all button state
+        this.updateSelectAllButtonState();
+        // Dispatch change event
+        this._dispatchEvent('change', {
+            value: value,
+            selected: false,
+            selectedOptions: this.getSelectedOptions(),
+        });
+        this._fireEvent('change', {
+            value: value,
+            selected: false,
+            selectedOptions: this.getSelectedOptions(),
+        });
+    };
     /**
      * Set selected options programmatically
      */
@@ -10790,36 +11195,24 @@ var KTSelect = /** @class */ (function (_super) {
      * Handle clicking on an option in the dropdown
      */
     KTSelect.prototype._handleOptionClick = function (event) {
-        if (this._config.debug)
-            console.log('_handleOptionClick called', event.target);
         event.preventDefault();
         event.stopPropagation();
         // Find the clicked option element
         var clickedOption = event.target.closest("[data-kt-select-option]");
         if (!clickedOption) {
-            if (this._config.debug)
-                console.log('No clicked option found');
             return;
         }
         // Check if the option is disabled
         if (clickedOption.getAttribute('aria-disabled') === 'true') {
-            if (this._config.debug)
-                console.log('Option is disabled, ignoring click');
             return;
         }
         // Use dataset.value to get the option value
         var optionValue = clickedOption.dataset.value;
         if (optionValue === undefined) {
-            if (this._config.debug)
-                console.log('Option value is undefined');
             return;
         }
-        if (this._config.debug)
-            console.log('Option clicked:', optionValue);
         // If in single-select mode and the clicked option is already selected, just close the dropdown.
         if (!this._config.multiple && this._state.isSelected(optionValue)) {
-            if (this._config.debug)
-                console.log('Single select mode: clicked already selected option. Closing dropdown.');
             this.closeDropdown();
             return;
         }
@@ -10948,22 +11341,19 @@ var KTSelect = /** @class */ (function (_super) {
     KTSelect.prototype.toggleSelection = function (value) {
         // Prevent selection if the option is disabled (in dropdown or original select)
         if (this._isOptionDisabled(value)) {
-            if (this._config.debug)
-                console.log('toggleSelection: Option is disabled, ignoring selection');
             return;
         }
         // Get current selection state
         var isSelected = this._state.isSelected(value);
-        if (this._config.debug)
-            console.log("toggleSelection called for value: ".concat(value, ", isSelected: ").concat(isSelected, ", multiple: ").concat(this._config.multiple));
-        // If already selected in single select mode, do nothing (can't deselect in single select)
+        // If already selected in single select mode, allow deselecting only if allowClear is true
         if (isSelected && !this._config.multiple) {
-            if (this._config.debug)
-                console.log('Early return from toggleSelection - already selected in single select mode');
-            return;
+            if (this._config.allowClear) {
+                // Use the deselectOption method to handle clearing
+                this.deselectOption(value);
+                return;
+            }
+            return; // Can't deselect in single select mode when allowClear is false
         }
-        if (this._config.debug)
-            console.log("Toggling selection for option: ".concat(value, ", currently selected: ").concat(isSelected));
         // Ensure any search input is cleared when selection changes
         if (this._searchModule) {
             this._searchModule.clearSearch();
@@ -10988,16 +11378,21 @@ var KTSelect = /** @class */ (function (_super) {
         this.updateSelectedOptionDisplay();
         // Update option classes without re-rendering the dropdown content
         this._updateSelectedOptionClass();
-        // For single select mode, always close the dropdown after selection
+        // For single select mode, close the dropdown after selection unless closeOnEnter is false
         // For multiple select mode, keep the dropdown open to allow multiple selections
         if (!this._config.multiple) {
-            if (this._config.debug)
-                console.log('About to call closeDropdown() for single select mode - always close after selection');
-            this.closeDropdown();
+            // Check if we should close based on closeOnEnter config
+            // closeOnEnter only applies to Enter key selections, but for backward compatibility,
+            // we'll respect it for all selections when explicitly set to false
+            var shouldClose = this._config.closeOnEnter !== false; // Default to true
+            if (shouldClose) {
+                this.closeDropdown();
+            }
+            else {
+                this.updateSelectAllButtonState();
+            }
         }
         else {
-            if (this._config.debug)
-                console.log('Multiple select mode - keeping dropdown open for additional selections');
             // Don't close dropdown in multiple select mode to allow multiple selections
             this.updateSelectAllButtonState();
         }
@@ -11129,9 +11524,6 @@ var KTSelect = /** @class */ (function (_super) {
                 var validSelections = currentlySelected.filter(function (value) {
                     return availableValues.includes(value);
                 });
-                if (_this._config.debug && currentlySelected.length > 0) {
-                    console.log('update(): Preserving selections that exist in new data:', validSelections);
-                }
                 // Add new options from remote data and restore selection state
                 items.forEach(function (item) {
                     var option = document.createElement('option');
@@ -11214,9 +11606,6 @@ var KTSelect = /** @class */ (function (_super) {
                 var validSelections = currentlySelected.filter(function (value) {
                     return availableValues.includes(value);
                 });
-                if (_this._config.debug && currentlySelected.length > 0) {
-                    console.log('reload(): Preserving selections that exist in new data:', validSelections);
-                }
                 // Mark preserved selections on new options
                 validSelections.forEach(function (value) {
                     var option = Array.from(_this._element.querySelectorAll('option')).find(function (opt) { return opt.value === value; });
@@ -11280,9 +11669,6 @@ var KTSelect = /** @class */ (function (_super) {
                 var validSelections = currentlySelected.filter(function (value) {
                     return availableValues.includes(value);
                 });
-                if (_this._config.debug && currentlySelected.length > 0) {
-                    console.log('refresh(): Preserving selections that exist in new data:', validSelections);
-                }
                 // Add new options and restore selection state
                 items.forEach(function (item) {
                     var option = document.createElement('option');
@@ -11461,9 +11847,6 @@ var KTSelect = /** @class */ (function (_super) {
             this._searchModule.refreshAfterSearch();
         }
         this.updateSelectAllButtonState();
-        if (this._config.debug) {
-            console.log('Restored original options after search clear');
-        }
     };
     /**
      * Update search results in the dropdown
@@ -11514,9 +11897,6 @@ var KTSelect = /** @class */ (function (_super) {
             }
             _this._element.appendChild(optionElement);
         });
-        if (this._config.debug) {
-            console.log("Updated original select with ".concat(items.length, " search results"));
-        }
     };
     /**
      * Check if dropdown is open
@@ -11641,8 +12021,6 @@ var KTSelect = /** @class */ (function (_super) {
                         if (val !== undefined &&
                             !this._config.multiple &&
                             this._state.isSelected(val)) {
-                            if (this._config.debug)
-                                console.log('Enter on already selected item in single-select mode. Closing.');
                             this.closeDropdown();
                             event.preventDefault();
                             break;
@@ -11826,8 +12204,23 @@ var KTSelect = /** @class */ (function (_super) {
             ? this._config.clearAllText
             : this._config.selectAllText;
     };
+    /**
+     * Destroy the component and clean up resources
+     */
+    KTSelect.prototype.destroy = function () {
+        // Remove from global dropdown registry
+        KTSelect.openDropdowns.delete(this);
+        // Close dropdown if open
+        if (this._dropdownIsOpen) {
+            this.closeDropdown();
+        }
+        // Call parent dispose method
+        _super.prototype.dispose.call(this);
+    };
     // Static global configuration
     KTSelect.globalConfig = {};
+    // Static registry for tracking open dropdowns (global dropdown management)
+    KTSelect.openDropdowns = new Set();
     return KTSelect;
 }(component_1.default));
 exports.KTSelect = KTSelect;
@@ -12028,16 +12421,19 @@ var KTDropdown = /** @class */ (function (_super) {
         _this._disabled = false;
         _this._isTransitioning = false;
         _this._isOpen = false;
-        if (data_1.default.has(element, _this._name))
+        if (data_1.default.has(element, _this._name)) {
             return _this;
+        }
         _this._init(element);
         _this._buildConfig(config);
         _this._toggleElement = _this._element.querySelector('[data-kt-dropdown-toggle]');
-        if (!_this._toggleElement)
+        if (!_this._toggleElement) {
             return _this;
+        }
         _this._menuElement = _this._element.querySelector('[data-kt-dropdown-menu]');
-        if (!_this._menuElement)
+        if (!_this._menuElement) {
             return _this;
+        }
         data_1.default.set(_this._menuElement, 'dropdownElement', _this._element);
         _this._setupNestedDropdowns();
         _this._handleContainer();
@@ -12070,10 +12466,12 @@ var KTDropdown = /** @class */ (function (_super) {
     KTDropdown.prototype._click = function (event) {
         event.preventDefault();
         event.stopPropagation();
-        if (this._disabled)
+        if (this._disabled) {
             return;
-        if (this._getOption('trigger') !== 'click')
+        }
+        if (this._getOption('trigger') !== 'click') {
             return;
+        }
         this._toggle();
     };
     KTDropdown.prototype._mouseover = function (event) {
@@ -12116,8 +12514,9 @@ var KTDropdown = /** @class */ (function (_super) {
     };
     KTDropdown.prototype._show = function () {
         var _this = this;
-        if (this._isOpen || this._isTransitioning)
+        if (this._isOpen || this._isTransitioning) {
             return;
+        }
         var payload = { cancel: false };
         this._fireEvent('show', payload);
         this._dispatchEvent('show', payload);
@@ -12290,6 +12689,12 @@ var KTDropdown = /** @class */ (function (_super) {
             reference.closest('[data-kt-dropdown-initialized]');
         if (findElement)
             return findElement;
+        // Fallback: look for parent with data-kt-dropdown attribute
+        if (reference) {
+            var dropdownContainer = reference.closest('[data-kt-dropdown]');
+            if (dropdownContainer)
+                return dropdownContainer;
+        }
         if (reference &&
             reference.hasAttribute('data-kt-dropdown-menu') &&
             data_1.default.has(reference, 'dropdownElement')) {
@@ -12299,10 +12704,12 @@ var KTDropdown = /** @class */ (function (_super) {
     };
     KTDropdown.getInstance = function (element) {
         element = this.getElement(element);
-        if (!element)
+        if (!element) {
             return null;
+        }
         if (data_1.default.has(element, 'dropdown')) {
-            return data_1.default.get(element, 'dropdown');
+            var instance = data_1.default.get(element, 'dropdown');
+            return instance;
         }
         if (element.getAttribute('data-kt-dropdown-initialized') === 'true') {
             return new KTDropdown(element);
@@ -12417,6 +12824,39 @@ var KTDropdown = /** @class */ (function (_super) {
             window.KT_DROPDOWN_INITIALIZED = true;
         }
     };
+    /**
+     * Force reinitialization of dropdowns by clearing KTData entries.
+     * Useful for Livewire wire:navigate where persisted elements need reinitialization.
+     */
+    KTDropdown.reinit = function () {
+        var elements = document.querySelectorAll('[data-kt-dropdown]');
+        elements.forEach(function (element) {
+            try {
+                // Get existing instance to clean up Popper
+                var instance = KTDropdown.getInstance(element);
+                if (instance && typeof instance.hide === 'function') {
+                    instance.hide(); // This will destroy Popper
+                }
+                // Clear KTData entries
+                data_1.default.remove(element, 'dropdown');
+                data_1.default.remove(element, 'popper');
+                // Remove initialization attribute to allow fresh initialization
+                element.removeAttribute('data-kt-dropdown-initialized');
+                var menu = element.querySelector('[data-kt-dropdown-menu]');
+                if (menu) {
+                    data_1.default.remove(menu, 'dropdownElement');
+                }
+            }
+            catch (e) {
+                // Ignore errors for individual elements
+            }
+        });
+        // Now create fresh instances
+        KTDropdown.createInstances();
+        // Always ensure handlers are set up (similar to KTMenu.init() behavior)
+        // Event handlers use delegation so they persist, but we ensure they're attached
+        KTDropdown.initHandlers();
+    };
     return KTDropdown;
 }(component_1.default));
 exports.KTDropdown = KTDropdown;
@@ -12480,7 +12920,15 @@ var KTData = {
             KTElementMap.delete(element);
         }
     },
+    // Clear all data for a specific element (useful for reinitialization)
+    clear: function (element) {
+        KTElementMap.delete(element);
+    },
 };
+// Expose KTData on window for external access (useful for Livewire wire:navigate)
+if (typeof window !== 'undefined') {
+    window.KTData = KTData;
+}
 exports["default"] = KTData;
 
 
@@ -12510,8 +12958,6 @@ var KTSelectTags = /** @class */ (function () {
         this._config = select.getConfig();
         this._valueDisplayElement = select.getValueDisplayElement();
         this._eventManager = new utils_1.EventManager();
-        if (this._config.debug)
-            console.log('KTSelectTags initialized');
     }
     /**
      * Update selected tags display
@@ -14358,7 +14804,8 @@ exports.DefaultConfig = {
     searchMinLength: 0, // Minimum characters required to trigger search
     searchMaxItems: 50, // Maximum number of search results to display
     searchEmpty: 'No results', // Text to display when no search results are found
-    clearSearchOnClose: true, // Clear search input when dropdown closes
+    clearSearchOnClose: false, // Clear search input when dropdown closes (default: false to persist search text)
+    closeOnEnter: true, // Close dropdown when Enter is pressed in search input
     // Multi-Select Display
     selectAllText: 'Select all', // Text for the "Select All" option (if implemented)
     clearAllText: 'Clear all', // Text for the "Clear All" option (if implemented)
@@ -14376,6 +14823,8 @@ exports.DefaultConfig = {
     dropdownPreventOverflow: false,
     dropdownStrategy: null,
     dropdownWidth: null, // Custom width for dropdown (e.g., '300px'), null to match toggle element width
+    closeOnOtherOpen: true, // Close other open dropdowns when this one opens
+    dispatchGlobalEvents: true, // Dispatch events on document for global listeners (jQuery compatibility)
     // New Config
     dropdownTemplate: '',
 };