@keenthemes/ktui 1.1.1 → 1.1.3

package/src/components/select/combobox.ts

@@ -54,7 +54,6 @@ export class KTSelectCombobox {
 			// this._select.showAllOptions(); // showAllOptions might be too broad, filtering is managed by typing.
 		});
 
-		if (this._config.debug) console.log('KTSelectCombobox initialized');
 	}
 
 	/**

package/src/components/select/config.ts

@@ -52,7 +52,8 @@ export const DefaultConfig: KTSelectConfigInterface = {
 	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)
@@ -73,6 +74,8 @@ export const DefaultConfig: KTSelectConfigInterface = {
 	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: '',
@@ -102,6 +105,7 @@ export interface KTSelectConfigInterface {
 	searchDebounce?: number;
 	searchParam?: string;
 	clearSearchOnClose?: boolean;
+	closeOnEnter?: boolean;
 
 	// Multi-Select Display
 	selectAllText?: string;
@@ -144,6 +148,8 @@ export interface KTSelectConfigInterface {
 	dropdownPreventOverflow?: boolean;
 	dropdownStrategy?: 'fixed' | 'absolute';
 	dropdownWidth?: string | null; // Custom width for dropdown, null to match toggle element width
+	closeOnOtherOpen?: boolean;
+	dispatchGlobalEvents?: boolean;
 
 	// Styling
 	dropdownClass?: string;

package/src/components/select/dropdown.ts

@@ -113,8 +113,6 @@ export class KTSelectDropdown extends KTComponent {
 		event.stopPropagation();
 
 		if (this._config.disabled) {
-			if (this._config.debug)
-				console.log('KTSelectDropdown._handleToggleClick: select is disabled');
 			return;
 		}
 
@@ -313,8 +311,6 @@ export class KTSelectDropdown extends KTComponent {
 	 */
 	public open(): void {
 		if (this._config.disabled) {
-			if (this._config.debug)
-				console.log('KTSelectDropdown.open: select is disabled, not opening');
 			return;
 		}
 		if (this._isOpen || this._isTransitioning) return;
@@ -390,26 +386,12 @@ export class KTSelectDropdown extends KTComponent {
 	 * Close the dropdown
 	 */
 	public close(): void {
-		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';
@@ -417,8 +399,6 @@ export class KTSelectDropdown extends KTComponent {
 		let transitionComplete = false;
 		const fallbackTimer = setTimeout(() => {
 			if (!transitionComplete) {
-				if (this._config.debug)
-					console.log('KTSelectDropdown.close - fallback timer triggered');
 				completeTransition();
 			}
 		}, 300);
@@ -428,8 +408,6 @@ export class KTSelectDropdown extends KTComponent {
 			transitionComplete = true;
 			clearTimeout(fallbackTimer);
 
-			if (this._config.debug)
-				console.log('KTSelectDropdown.close - transition ended');
 
 			this._dropdownElement.classList.add('hidden');
 			this._dropdownElement.classList.remove('open');
@@ -443,8 +421,6 @@ export class KTSelectDropdown extends KTComponent {
 
 			// Events will be handled by KTSelect
 
-			if (this._config.debug)
-				console.log('KTSelectDropdown.close - visual part complete');
 		};
 
 		KTDom.transitionEnd(this._dropdownElement, completeTransition);

package/src/components/select/remote.ts

@@ -50,8 +50,6 @@ export class KTSelectRemote {
 
 		let url = this._buildUrl(query, page);
 
-		if (this._config.debug) console.log('Fetching remote data from:', url);
-
 		// Dispatch search start event
 		this._dispatchEvent('remoteSearchStart');
 
@@ -148,32 +146,21 @@ export class KTSelectRemote {
 	 */
 	private _processData(data: any): KTSelectOptionData[] {
 		try {
-			if (this._config.debug) console.log('Processing API response:', data);
 
 			let 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: ${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: ${this._totalPages}`);
 					}
 					if (data.total) {
 						this._totalPages = Math.ceil(
 							data.total / (this._config.paginationLimit || 10),
 						);
-						if (this._config.debug)
-							console.log(
-								`Calculated total pages: ${this._totalPages} from total: ${data.total}`,
-							);
 					}
 				}
 
@@ -186,10 +173,6 @@ export class KTSelectRemote {
 				return [];
 			}
 
-			if (this._config.debug)
-				console.log(
-					`Mapping ${processedData.length} items to KTSelectOptionData format`,
-				);
 
 			// Map data to KTSelectOptionData format
 			const mappedData = processedData.map((item: any): KTSelectOptionData => {
@@ -221,10 +204,6 @@ export class KTSelectRemote {
 					// If we found a value, verify it matches what was extracted
 					if (nestedValue !== null && nestedValue !== undefined) {
 						const expectedValue = String(nestedValue);
-						if (this._config.debug)
-							console.log(
-								`Data path verification for [${this._config.dataValueField}]: Expected: ${expectedValue}, Got: ${mappedItem.id}`,
-							);
 
 						if (mappedItem.id !== expectedValue && expectedValue) {
 							console.warn(
@@ -234,13 +213,9 @@ export class KTSelectRemote {
 					}
 				}
 
-				if (this._config.debug)
-					console.log(`Mapped item: ${JSON.stringify(mappedItem)}`);
 				return mappedItem;
 			});
 
-			if (this._config.debug)
-				console.log(`Returned ${mappedData.length} mapped items`);
 			return mappedData;
 		} catch (error) {
 			console.error('Error processing remote data:', error);
@@ -260,10 +235,6 @@ export class KTSelectRemote {
 		const valueField = this._config.dataValueField || 'id';
 		const labelField = this._config.dataFieldText || 'title';
 
-		if (this._config.debug)
-			console.log(`Mapping fields: value=${valueField}, label=${labelField}`);
-		if (this._config.debug)
-			console.log('Item data:', JSON.stringify(item).substring(0, 200) + '...'); // Trimmed for readability
 
 		// Extract values using improved getValue function
 		const getValue = (obj: any, path: string): any => {
@@ -285,17 +256,6 @@ export class KTSelectRemote {
 					result = result[part];
 				}
 
-				// Log the extraction result
-				if (this._config.debug)
-					console.log(
-						`Extracted [${path}] => ${
-							result !== null && result !== undefined
-								? typeof result === 'object'
-									? JSON.stringify(result).substring(0, 50)
-									: String(result).substring(0, 50)
-								: 'null'
-						}`,
-					);
 
 				return result;
 			} catch (error) {
@@ -312,8 +272,6 @@ export class KTSelectRemote {
 			for (const field of fallbackFields) {
 				if (item[field] !== null && item[field] !== undefined) {
 					id = String(item[field]);
-					if (this._config.debug)
-						console.log(`Using fallback field '${field}' for ID: ${id}`);
 					break;
 				}
 			}
@@ -324,7 +282,6 @@ export class KTSelectRemote {
 		// If still no ID, generate one
 		if (!id) {
 			id = `option-${Math.random().toString(36).substr(2, 9)}`;
-			if (this._config.debug) console.log(`Generated fallback ID: ${id}`);
 		}
 
 		// Get label with proper fallbacks
@@ -342,8 +299,6 @@ export class KTSelectRemote {
 			for (const field of fallbackFields) {
 				if (item[field] !== null && item[field] !== undefined) {
 					title = String(item[field]);
-					if (this._config.debug)
-						console.log(`Using fallback field '${field}' for title: ${title}`);
 					break;
 				}
 			}
@@ -354,8 +309,6 @@ export class KTSelectRemote {
 		// If still no title, use ID as fallback
 		if (!title) {
 			title = `Option ${id}`;
-			if (this._config.debug)
-				console.log(`Using ID as fallback title: ${title}`);
 		}
 
 		// Create the option object with consistent structure
@@ -366,8 +319,6 @@ export class KTSelectRemote {
 			disabled: Boolean(item.disabled),
 		};
 
-		if (this._config.debug)
-			console.log('Final mapped item:', JSON.stringify(result));
 		return result;
 	}
 

package/src/components/select/search.ts

@@ -39,11 +39,6 @@ export class KTSelectSearch {
 			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();
@@ -96,24 +91,40 @@ export class KTSelectSearch {
 					.getWrapperElement()
 					.addEventListener('dropdown.close', () => {
 						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
+						const 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', () => {
 					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
+					const config = this._select.getConfig();
+					if (!config.multiple && config.closeOnEnter !== false) {
 						this._select.closeDropdown();
 					}
 				});
@@ -137,11 +148,9 @@ export class KTSelectSearch {
 							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(() => {
-								this._searchInput?.focus(); // Focus search input
-							}, 50); // Delay to ensure dropdown is visible
+							this._focusSearchInputWithRetry();
 						}
 						this._select.updateSelectAllButtonState();
 					});
@@ -158,6 +167,58 @@ export class KTSelectSearch {
 		}
 	}
 
+	/**
+	 * Focus the search input with retry mechanism for reliability
+	 * Retries up to 3 times with exponential backoff (50ms, 100ms, 200ms)
+	 */
+	private _focusSearchInputWithRetry(attempt: number = 0): void {
+		if (!this._searchInput) {
+			return;
+		}
+
+		const maxAttempts = 3;
+		const 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;
+		}
+
+		const delay = delays[attempt] || 200;
+		const focusAttempt = () => {
+			try {
+				this._searchInput?.focus();
+				// Check if focus was successful
+				const 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.
 	 */
@@ -180,15 +241,27 @@ export class KTSelectSearch {
 				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.
 				const firstAvailableOption = this._focusManager.focusFirst();
 
 				if (firstAvailableOption) {
 					const optionValue = firstAvailableOption.getAttribute('data-value');
 					if (optionValue) {
-						this._select.toggleSelection(optionValue);
-						// KTSelect.toggleSelection handles closing the dropdown based on config.closeOnSelect and config.multiple
+						const config = this._select.getConfig();
+						const isAlreadySelected = !config.multiple && this._select.getSelectedOptions().includes(optionValue);
+						const 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(() => {
+								this._select.getDisplayElement()?.focus();
+							}, 0);
+						}
 					}
 				}
 				break;

package/src/components/select/select.css

@@ -127,7 +127,11 @@
 	}
 
 	.kt-select-display:not([data-multiple='true']) {
-		@apply w-full overflow-ellipsis truncate;
+		@apply w-full flex items-center min-w-0;
+	}
+
+	.kt-select-display:not([data-multiple='true']) .kt-select-option-text {
+		@apply min-w-0 overflow-ellipsis truncate;
 	}
 
 	/* Enhanced Tag Styles */