@keenthemes/ktui 1.1.2 → 1.1.4

package/src/components/select/select.ts

@@ -149,23 +149,31 @@ export class KTSelect extends KTComponent {
 		const dispatchGlobalEvents =
 			this._config.dispatchGlobalEvents !== false; // Default to true
 		if (dispatchGlobalEvents) {
-			// Create namespaced event name for document dispatch
-			const namespacedEventType = `kt-select:${eventType}`;
-
-			// Create event with same detail structure
-			const globalEvent = new CustomEvent(namespacedEventType, {
-				detail: {
-					payload,
-					instance: this, // Include component instance reference
-					element: this._element, // Include element reference
-				},
+			// Create event detail structure
+			const eventDetail = {
+				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', ...))
+			const nonNamespacedEvent = new CustomEvent(eventType, {
+				detail: eventDetail,
 				bubbles: true,
 				cancelable: true,
 				composed: true, // Allow event to cross shadow DOM boundaries
 			});
+			document.dispatchEvent(nonNamespacedEvent);
 
-			// Dispatch on document
-			document.dispatchEvent(globalEvent);
+			// Also dispatch namespaced event on document (for namespaced listeners: $(document).on('kt-select:show', ...))
+			const namespacedEventType = `kt-select:${eventType}`;
+			const namespacedEvent = new CustomEvent(namespacedEventType, {
+				detail: eventDetail,
+				bubbles: true,
+				cancelable: true,
+				composed: true, // Allow event to cross shadow DOM boundaries
+			});
+			document.dispatchEvent(namespacedEvent);
 		}
 	}
 
@@ -1113,7 +1121,24 @@ export class KTSelect extends KTComponent {
 		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(() => {
+			requestAnimationFrame(() => {
+				if (this._wrapperElement) {
+					const dropdownShowEvent = new CustomEvent('dropdown.show', {
+						bubbles: true,
+						cancelable: true,
+					});
+					this._wrapperElement.dispatchEvent(dropdownShowEvent);
+				}
+			});
+		});
 	}
 
 	/**
@@ -1150,7 +1175,7 @@ export class KTSelect extends KTComponent {
 			this._focusManager.resetFocus();
 		}
 
-		// Dispatch custom events
+		// Dispatch custom events on the select element
 		this._dispatchEvent('close');
 		this._fireEvent('close');
 
@@ -1315,15 +1340,18 @@ export class KTSelect extends KTComponent {
 					return; // Exit early to prevent any text generation
 				} else {
 					// Tags are not enabled AND options are selected: render normal text display.
-					let content = '';
+					// Wrap content in .kt-select-option-text so long text truncates in single-select (see Asana #1212821478465094).
+					const wrapper = document.createElement('div');
+					wrapper.className = 'kt-select-option-text';
+					wrapper.setAttribute('data-kt-text-container', 'true');
 					if (this._config.displayTemplate) {
-						content = this.renderDisplayTemplateForSelected(
+						wrapper.innerHTML = this.renderDisplayTemplateForSelected(
 							this.getSelectedOptions(),
 						);
 					} else {
-						content = this.getSelectedOptionsText();
+						wrapper.textContent = this.getSelectedOptionsText();
 					}
-					valueDisplayEl.innerHTML = content;
+					valueDisplayEl.replaceChildren(wrapper);
 				}
 			}
 		}
@@ -1409,6 +1437,65 @@ export class KTSelect extends KTComponent {
 		this._fireEvent('change');
 	}
 
+	/**
+	 * Deselect a specific option by value
+	 * @param value The value of the option to deselect
+	 * @public
+	 */
+	public deselectOption(value: string): void {
+		// 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
+		const optionEl = Array.from(this._element.querySelectorAll('option')).find(
+			(opt) => opt.value === value,
+		) as HTMLOptionElement;
+
+		if (optionEl) {
+			optionEl.selected = false;
+		}
+
+		// For single select, clear the native select value
+		if (!this._config.multiple) {
+			(this._element as HTMLSelectElement).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
 	 */
@@ -1657,9 +1744,14 @@ export class KTSelect extends KTComponent {
 		// Get current selection state
 		const 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

package/src/components/sticky/sticky.ts

@@ -44,6 +44,8 @@ export class KTSticky extends KTComponent implements KTStickyInterface {
 	protected _releaseElement: HTMLElement;
 	protected _activateElement: HTMLElement;
 	protected _wrapperElement: HTMLElement;
+	private _resizeHandler: (() => void) | null = null;
+	private _scrollHandler: (() => void) | null = null;
 
 	constructor(
 		element: HTMLElement,
@@ -51,7 +53,10 @@ export class KTSticky extends KTComponent implements KTStickyInterface {
 	) {
 		super();
 
-		if (KTData.has(element as HTMLElement, this._name)) return;
+		// Check if element already has an instance and is still connected
+		if (this._shouldSkipInit(element)) {
+			return;
+		}
 
 		this._init(element);
 		this._buildConfig(config);
@@ -88,7 +93,8 @@ export class KTSticky extends KTComponent implements KTStickyInterface {
 	}
 
 	protected _handlers(): void {
-		window.addEventListener('resize', () => {
+		// Store resize handler reference for cleanup
+		this._resizeHandler = () => {
 			let timer;
 
 			KTUtils.throttle(
@@ -98,11 +104,25 @@ export class KTSticky extends KTComponent implements KTStickyInterface {
 				},
 				200,
 			);
-		});
+		};
 
-		this._targetElement.addEventListener('scroll', () => {
+		window.addEventListener('resize', this._resizeHandler);
+
+		// Store scroll handler reference for cleanup
+		this._scrollHandler = () => {
 			this._process();
-		});
+		};
+
+		if (this._targetElement) {
+			if (this._targetElement === document) {
+				window.addEventListener('scroll', this._scrollHandler);
+			} else {
+				(this._targetElement as HTMLElement).addEventListener(
+					'scroll',
+					this._scrollHandler,
+				);
+			}
+		}
 	}
 
 	protected _process(): void {
@@ -373,6 +393,36 @@ export class KTSticky extends KTComponent implements KTStickyInterface {
 		return this._isActive();
 	}
 
+	public override dispose(): void {
+		// 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 as HTMLElement).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.dispose();
+	}
+
 	public static getInstance(element: HTMLElement): KTSticky {
 		if (!element) return null;
 

package/src/helpers/data.ts

@@ -41,6 +41,16 @@ const KTData = {
 			KTElementMap.delete(element);
 		}
 	},
+
+	// Clear all data for a specific element (useful for reinitialization)
+	clear(element: HTMLElement): void {
+		KTElementMap.delete(element);
+	},
 };
 
+// Expose KTData on window for external access (useful for Livewire wire:navigate)
+if (typeof window !== 'undefined') {
+	window.KTData = KTData;
+}
+
 export default KTData;

package/src/helpers/event-handler.ts

@@ -28,14 +28,15 @@ const KTEventHandler = {
 		KTDelegatedEventHandlers[eventId] = (
 			event: Event & { target: HTMLElement },
 		) => {
-			const targets = element.querySelectorAll(selector);
-			let target = event.target;
+			// Fix: Check selector dynamically instead of pre-computing targets
+			// This allows event delegation to work with dynamically added elements
+			let target = event.target as HTMLElement;
 
 			while (target && target !== element) {
-				for (let 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 as HTMLElement;

package/src/index.ts

@@ -6,6 +6,7 @@
 import KTDom from './helpers/dom';
 import KTUtils from './helpers/utils';
 import KTEventHandler from './helpers/event-handler';
+import KTData from './helpers/data';
 import { KTDropdown } from './components/dropdown';
 import { KTModal } from './components/modal';
 import { KTDrawer } from './components/drawer';
@@ -81,6 +82,7 @@ declare global {
 		KTUtils: typeof KTUtils;
 		KTDom: typeof KTDom;
 		KTEventHandler: typeof KTEventHandler;
+		KTData: typeof KTData;
 		KTDropdown: typeof KTDropdown;
 		KTModal: typeof KTModal;
 		KTDrawer: typeof KTDrawer;