@keenthemes/ktui 1.1.2 → 1.1.4

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 (data_1.default.has(drawerElement, 'drawer')) {
+            return data_1.default.get(drawerElement, 'drawer');
         }
-        if (element.getAttribute('data-kt-drawer-initialized') === 'true') {
-            return new KTDrawer(element);
+        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;
@@ -5743,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;
             }
@@ -7213,9 +7521,13 @@ var KTDataTable = /** @class */ (function (_super) {
         var originalDataAttributes = [];
         this._storeOriginalClasses();
         var rows = this._tbodyElement.querySelectorAll('tr');
-        var ths = this._theadElement
+        // Filter th elements to only include those with data-kt-datatable-column attribute
+        var allThs = this._theadElement
             ? this._theadElement.querySelectorAll('th')
             : [];
+        var ths = Array.from(allThs).filter(function (th) {
+            return th.hasAttribute('data-kt-datatable-column');
+        });
         rows.forEach(function (row) {
             var dataRow = {};
             var dataRowAttribute = {};
@@ -7243,9 +7555,13 @@ var KTDataTable = /** @class */ (function (_super) {
      */
     KTDataTable.prototype._localTableHeaderInvalidate = function () {
         var originalData = this.getState().originalData;
-        var currentTableHeaders = this._theadElement
-            ? this._theadElement.querySelectorAll('th').length
-            : 0;
+        // Count only th elements with data-kt-datatable-column attribute
+        var allThs = this._theadElement
+            ? this._theadElement.querySelectorAll('th')
+            : [];
+        var currentTableHeaders = Array.from(allThs).filter(function (th) {
+            return th.hasAttribute('data-kt-datatable-column');
+        }).length;
         var totalColumns = originalData.length
             ? Object.keys(originalData[0]).length
             : 0;
@@ -7495,9 +7811,14 @@ var KTDataTable = /** @class */ (function (_super) {
             this._noticeOnTable(this._config.infoEmpty || '');
             return tbodyElement;
         }
-        var ths = this._theadElement
+        // Filter th elements to only include those with data-kt-datatable-column attribute
+        // This prevents creating blank td elements for merged header cells (colspan/rowspan)
+        var allThs = this._theadElement
             ? this._theadElement.querySelectorAll('th')
             : [];
+        var ths = Array.from(allThs).filter(function (th) {
+            return th.hasAttribute('data-kt-datatable-column');
+        });
         this._data.forEach(function (item, rowIndex) {
             var row = document.createElement('tr');
             // Apply original tr class if available
@@ -7508,7 +7829,7 @@ var KTDataTable = /** @class */ (function (_super) {
                 var dataRowAttributes_1 = _this.getState().originalDataAttributes
                     ? _this.getState().originalDataAttributes[rowIndex]
                     : null;
-                // Use the order of <th> elements to render <td>s in the correct order
+                // Use the order of <th> elements with data-kt-datatable-column to render <td>s in the correct order
                 ths.forEach(function (th, colIndex) {
                     var colName = th.getAttribute('data-kt-datatable-column');
                     var td = document.createElement('td');
@@ -8090,7 +8411,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.
@@ -9391,6 +9718,7 @@ var KTSelectSearch = /** @class */ (function () {
      * 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,19 +9736,28 @@ 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) {
-                        // toggleSelection() already handles closing the dropdown based on closeOnEnter config
-                        // for single-select mode, so we don't need to call closeDropdown() here
-                        this._select.toggleSelection(optionValue);
-                        // If closeOnEnter is false, dropdown remains open for additional selections
+                        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);
+                        }
                     }
                 }
-                // If no available option, do nothing (dropdown remains open)
                 break;
             case 'Escape':
                 event.preventDefault();
@@ -9790,21 +10127,29 @@ var KTSelect = /** @class */ (function (_super) {
         // Also dispatch on document if configured
         var dispatchGlobalEvents = this._config.dispatchGlobalEvents !== false; // Default to true
         if (dispatchGlobalEvents) {
-            // Create namespaced event name for document dispatch
+            // 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);
-            // Create event with same detail structure
-            var globalEvent = new CustomEvent(namespacedEventType, {
-                detail: {
-                    payload: payload,
-                    instance: this, // Include component instance reference
-                    element: this._element, // Include element reference
-                },
+            var namespacedEvent = new CustomEvent(namespacedEventType, {
+                detail: eventDetail,
                 bubbles: true,
                 cancelable: true,
                 composed: true, // Allow event to cross shadow DOM boundaries
             });
-            // Dispatch on document
-            document.dispatchEvent(globalEvent);
+            document.dispatchEvent(namespacedEvent);
         }
     };
     /**
@@ -10494,7 +10839,23 @@ var KTSelect = /** @class */ (function (_super) {
         // 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
@@ -10523,7 +10884,7 @@ var KTSelect = /** @class */ (function (_super) {
         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
@@ -10670,14 +11031,17 @@ var KTSelect = /** @class */ (function (_super) {
                 }
                 else {
                     // Tags are not enabled AND options are selected: render normal text display.
-                    var content = '';
+                    // Wrap content in .kt-select-option-text so long text truncates in single-select (see Asana #1212821478465094).
+                    var wrapper = document.createElement('div');
+                    wrapper.className = 'kt-select-option-text';
+                    wrapper.setAttribute('data-kt-text-container', 'true');
                     if (this._config.displayTemplate) {
-                        content = this.renderDisplayTemplateForSelected(this.getSelectedOptions());
+                        wrapper.innerHTML = this.renderDisplayTemplateForSelected(this.getSelectedOptions());
                     }
                     else {
-                        content = this.getSelectedOptionsText();
+                        wrapper.textContent = this.getSelectedOptionsText();
                     }
-                    valueDisplayEl.innerHTML = content;
+                    valueDisplayEl.replaceChildren(wrapper);
                 }
             }
         }
@@ -10747,6 +11111,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
      */
@@ -10948,9 +11361,14 @@ var KTSelect = /** @class */ (function (_super) {
         }
         // Get current selection state
         var isSelected = this._state.isSelected(value);
-        // 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) {
-            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
         }
         // Ensure any search input is cleared when selection changes
         if (this._searchModule) {
@@ -12019,16 +12437,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();
@@ -12061,10 +12482,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) {
@@ -12107,8 +12530,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);
@@ -12281,6 +12705,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')) {
@@ -12290,10 +12720,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);
@@ -12408,6 +12840,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;
@@ -12471,7 +12936,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;