@keenthemes/ktui 1.0.12 → 1.0.14

package/src/components/select/option.ts

@@ -12,53 +12,72 @@ import { defaultTemplates } from './templates';
 export class KTSelectOption extends KTComponent {
 	protected override readonly _name: string = 'select-option';
 	protected override readonly _dataOptionPrefix: string = 'kt-'; // Use 'kt-' prefix to support data-kt-select-option attributes
-	protected override readonly _config: KTSelectConfigInterface;
-	private _globalConfig: KTSelectConfigInterface;
+	protected override readonly _config: KTSelectConfigInterface; // Holds option-specific data from data-kt-*
+	private _globalConfig: KTSelectConfigInterface; // Main select's config
 
 	constructor(element: HTMLElement, config?: KTSelectConfigInterface,) {
 		super();
 
 		// Always initialize a new option instance
 		this._init(element);
-		this._buildConfig();
 		this._globalConfig = config;
+		this._buildConfig();
 
 		// Clean the config
 		this._config = (this._config as any)[''] || {};
 
 		// Add the option config to the global config
-		this._globalConfig.optionsConfig = this._globalConfig.optionsConfig || {};
-		this._globalConfig.optionsConfig[(element as HTMLInputElement).value] = this._config;
+		// Ensure optionsConfig is initialized
+		if (this._globalConfig) {
+			this._globalConfig.optionsConfig = this._globalConfig.optionsConfig || {};
+			this._globalConfig.optionsConfig[(element as HTMLInputElement).value] = this._config;
+		} else {
+			// Handle case where _globalConfig might be undefined, though constructor expects it.
+			// This might indicate a need to ensure config is always passed or has a default.
+			console.warn('KTSelectOption: _globalConfig is undefined during constructor.');
+		}
 
 		// Don't store in KTData to avoid Singleton pattern issues
 		// Each option should be a unique instance
 		(element as any).instance = this;
 	}
 
-	public getHTMLOptionElement(): HTMLOptionElement {
-		return this._element as HTMLOptionElement;
+	public get id(): string {
+		return this.getHTMLOptionElement().value;
 	}
 
-	public render(): HTMLElement {
-		const optionElement = this.getHTMLOptionElement();
-
-		// Get the original template
-		let originalTemplate = this._globalConfig.optionTemplate;
-
-		if (this._globalConfig.optionTemplate) {
-			// Replace all {{varname}} in option.innerHTML with values from _config
-			Object.entries((this._config as any) || {}).forEach(([key, value]) => {
-				if (typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean') {
-					this._globalConfig.optionTemplate = this._globalConfig.optionTemplate.replace(new RegExp(`{{${key}}}`, 'g'), String(value));
-				}
-			});
-		}
+	public get title(): string {
+		return this.getHTMLOptionElement().textContent || '';
+	}
 
-		let template = defaultTemplates.option(optionElement, this._globalConfig);
+	public getHTMLOptionElement(): HTMLOptionElement {
+		return this._element as HTMLOptionElement;
+	}
 
-		// Restore the original template
-		this._globalConfig.optionTemplate = originalTemplate;
+	/**
+	 * Gathers all necessary data for rendering this option,
+	 * including standard HTML attributes and custom data-kt-* attributes.
+	 */
+	public getOptionDataForTemplate(): Record<string, any> {
+		const el = this.getHTMLOptionElement();
+		const text = el.textContent || '';
+		return {
+			// Custom data from data-kt-select-option attributes (parsed into this._config)
+			...this._config,
+			// Standard HTMLOptionElement properties
+			value: el.value,
+			text: text, // Original text
+			selected: el.selected,
+			disabled: el.disabled,
+			// Provide 'content' for convenience in templates, defaulting to text.
+			// User's optionTemplate can then use {{content}} or specific fields like {{text}}, {{icon}}, etc.
+			content: text,
+		};
+	}
 
-		return template;
+	public render(): HTMLElement {
+		// 'this' is the KTSelectOption instance.
+		// defaultTemplates.option will handle using this instance's data along with _globalConfig.
+		return defaultTemplates.option(this, this._globalConfig);
 	}
 }

package/src/components/select/search.ts

@@ -3,6 +3,7 @@
  * Copyright 2025 by Keenthemes Inc
  */
 
+import { KTSelectConfigInterface } from './config';
 import { KTSelect } from './select';
 import { defaultTemplates } from './templates';
 import {
@@ -18,7 +19,7 @@ export class KTSelectSearch {
 	private _originalOptionContents = new Map<string, string>();
 	private _eventManager: EventManager;
 	private _focusManager: FocusManager;
-	private _config: import('./config').KTSelectConfigInterface;
+	private _config: KTSelectConfigInterface;
 
 	// Public handler for search input (made public for event binding)
 	public handleSearchInput: (...args: any[]) => void;
@@ -51,20 +52,27 @@ export class KTSelectSearch {
 				// First remove any existing listeners to prevent duplicates
 				this._removeEventListeners();
 
-				// Add the event listener
+				// Add the input event listener for filtering
 				this._eventManager.addListener(
 					this._searchInput,
 					'input',
 					this.handleSearchInput,
 				);
 
+				// Add keydown event listener for navigation, selection, and escape
+				this._eventManager.addListener(
+					this._searchInput,
+					'keydown',
+					this._handleSearchKeyDown.bind(this)
+				);
+
 				// Add blur event listener to ensure highlights are cleared when focus is lost
 				this._eventManager.addListener(this._searchInput, 'blur', () => {
 					// Small delay to prevent race conditions with selection
 					setTimeout(() => {
 						if (!this._searchInput.value) {
 							this._resetAllOptions();
-							this.clearSearchHighlights();
+							this.clearSearch();
 						}
 					}, 100);
 				});
@@ -87,43 +95,50 @@ export class KTSelectSearch {
 					});
 				}
 
-				// Listen for dropdown close to reset options if search is empty
-				this._select.getElement().addEventListener('dropdown.close', () => {
+				// Listen for dropdown close to reset options - ATTACH TO WRAPPER
+				this._select.getWrapperElement().addEventListener('dropdown.close', () => {
 					this._focusManager.resetFocus();
-					this.clearSearchHighlights();
-					this._searchInput.value = '';
-					this._resetAllOptions();
-					this._clearNoResultsMessage();
+					// 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
 				});
 
-				// Clear highlights when an option is selected
+				// Clear highlights when an option is selected - ATTACH TO ORIGINAL SELECT (standard 'change' event)
 				this._select.getElement().addEventListener('change', () => {
-					this.clearSearchHighlights();
+					this.clearSearch();
 
 					// Close dropdown if configured to do so
-					if (
-						this._select.getConfig().closeOnSelect &&
-						!this._select.getConfig().multiple
-					) {
-						this._select.closeDropdown();
-					}
+					this._select.closeDropdown();
 				});
 
-				// Autofocus on search input
-				if (this._select.getConfig().searchAutofocus) {
-					this._select.getElement().addEventListener('dropdown.show', () => {
-						setTimeout(() => {
-							// Add slight delay to ensure the dropdown and search input are visible
-							this._searchInput?.focus();
-						}, 50);
-					});
-				}
+				// Consolidated 'dropdown.show' event listener - ATTACH TO WRAPPER
+				this._select.getWrapperElement().addEventListener('dropdown.show', () => {
+					this._focusManager.resetFocus(); // Always clear previous focus state
+
+					if (this._searchInput?.value) {
+						// If there's an existing search term:
+						// 1. Re-filter options. This ensures the display (hidden/visible) is correct
+						//    and "no results" message is handled if query yields nothing.
+						this._filterOptions(this._searchInput.value);
+					} else {
+						// If search input is empty:
+						// 1. Reset all options to their full, unfiltered, original state.
+						this._resetAllOptions(); // Shows all, clears highlights from options, restores original text
+						// 2. Clear any "no results" message.
+						this._clearNoResultsMessage();
+					}
 
-				// Listen for explicit dropdown open event to clear highlights if needed
-				this._select.getElement().addEventListener('dropdown.show', () => {
-					// If search input is empty, ensure highlights are cleared on open
-					if (!this._searchInput?.value) {
-						this.clearSearchHighlights();
+					// Handle autofocus for the search input (this was one of the original separate listeners)
+					if (this._select.getConfig().searchAutofocus) {
+						setTimeout(() => {
+							this._searchInput?.focus(); // Focus search input
+						}, 50); // Delay to ensure dropdown is visible
 					}
 				});
 			}
@@ -140,21 +155,44 @@ export class KTSelectSearch {
 	}
 
 	/**
-	 * Select the currently focused option
+	 * Handles keydown events on the search input for navigation and actions.
 	 */
-	private _selectFocusedOption() {
-		const focusedOption = this._focusManager.getFocusedOption();
-
-		if (focusedOption) {
-			const optionValue = focusedOption.getAttribute('data-value');
-
-			if (optionValue) {
-				// Ensure highlights are cleared before selection
-				this.clearSearchHighlights();
-
-				// Trigger the selection in the main select component
-				this._select['_selectOption'](optionValue);
-			}
+	private _handleSearchKeyDown(event: KeyboardEvent): void {
+		const key = event.key;
+
+		switch (key) {
+			case 'ArrowDown':
+				event.preventDefault();
+				this._focusManager.focusNext();
+				break;
+			case 'ArrowUp':
+				event.preventDefault();
+				this._focusManager.focusPrevious();
+				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
+					}
+				}
+				break;
+			case 'Escape':
+				event.preventDefault();
+				this._searchInput.value = '';
+				this.clearSearch();
+				this._resetAllOptions();
+				this._clearNoResultsMessage();
+				this._focusManager.focusFirst();
+				break;
+			default:
+				break;
 		}
 	}
 
@@ -165,46 +203,71 @@ export class KTSelectSearch {
 	private _cacheOriginalOptionContents() {
 		// Wait for options to be initialized
 		setTimeout(() => {
+			this._originalOptionContents.clear(); // Clear before re-caching
 			const options = Array.from(this._select.getOptionsElement());
 			options.forEach((option) => {
 				const value = option.getAttribute('data-value');
 				if (value) {
+					// Store the full innerHTML as the original content
 					this._originalOptionContents.set(value, option.innerHTML);
 				}
 			});
 		}, 0);
 	}
 
+	/**
+	 * Restores the innerHTML of all options from the cache if they have been modified.
+	 * This is typically called before applying new filters/highlights.
+	 */
+	private _restoreOptionContentsBeforeFilter(): void {
+		const options = Array.from(this._select.getOptionsElement()) as HTMLElement[];
+		options.forEach(option => {
+			const value = option.getAttribute('data-value');
+			if (value && this._originalOptionContents.has(value)) {
+				const originalContent = this._originalOptionContents.get(value)!;
+				// Only restore if current content is different, to avoid unnecessary DOM manipulation
+				if (option.innerHTML !== originalContent) {
+					option.innerHTML = originalContent;
+				}
+			}
+		});
+	}
+
 	private _handleSearchInput(event: Event) {
-		const query = (event.target as HTMLInputElement).value.toLowerCase();
+		const query = (event.target as HTMLInputElement).value;
 		const config = this._select.getConfig();
 
 		// Reset focused option when search changes
 		this._focusManager.resetFocus();
 
-		// If search query is empty, clear all highlights
+		// Restore original content for all options before filtering/highlighting again
+		this._restoreOptionContentsBeforeFilter();
+
 		if (query.trim() === '') {
-			this.clearSearchHighlights();
+			this._resetAllOptions();
+			this._focusManager.focusFirst(); // Focus first option when search is cleared
+			return;
 		}
 
-		// For remote search, we don't filter locally
-		// The KTSelect component will handle the remote search
+		// For remote search, KTSelect component handles it.
+		// KTSelect will call refreshAfterSearch on this module when remote data is updated.
 		if (config.remote && config.searchParam) {
-			// If query is too short, reset all options to visible state
 			if (query.length < config.searchMinLength) {
 				this._resetAllOptions();
 				this._clearNoResultsMessage();
+				this._focusManager.focusFirst(); // Focus first if query too short
 			}
-			// Otherwise, let KTSelect handle remote search
 			return;
 		}
 
 		// For local search
 		if (query.length >= config.searchMinLength) {
 			this._filterOptions(query);
+			this._focusManager.focusFirst(); // Focus first visible option after local filtering
 		} else {
 			this._resetAllOptions();
 			this._clearNoResultsMessage();
+			this._focusManager.focusFirst(); // Focus first if query too short and not remote
 		}
 	}
 
@@ -220,22 +283,12 @@ export class KTSelectSearch {
 			this._cacheOriginalOptionContents();
 		}
 
-		// Use the shared filterOptions utility
-		filterOptions(options, query, config, dropdownElement, (visibleCount) =>
-			this._handleNoResults(visibleCount),
-		);
-
-		// Apply specialized text highlighting if needed
-		if (config.searchHighlight && query.trim() !== '') {
-			this._applyHighlightToDisplay(query);
-		}
-	}
+		// Restore original content before filtering, so highlighting is applied fresh.
+		this._restoreOptionContentsBeforeFilter();
 
-	/**
-	 * Apply highlighting to the display element for multi-select
-	 */
-	private _applyHighlightToDisplay(query: string) {
-		// Implementation for display highlighting
+		const visibleCount = filterOptions(options, query, config, dropdownElement, (count) =>
+			this._handleNoResults(count),
+		);
 	}
 
 	/**
@@ -247,44 +300,31 @@ export class KTSelectSearch {
 			this._select.getOptionsElement(),
 		) as HTMLElement[];
 
-		// Cache original option HTML if not already cached
+		// Ensure the cache is populated if it's somehow empty here
 		if (this._originalOptionContents.size === 0) {
 			this._cacheOriginalOptionContents();
 		}
 
 		options.forEach((option) => {
-			// Remove the hidden class
 			option.classList.remove('hidden');
+			if (option.style.display === 'none') option.style.display = ''; // Ensure visible
 
 			// Restore original HTML content (remove highlights)
 			const value = option.getAttribute('data-value');
 			if (value && this._originalOptionContents.has(value)) {
-				option.innerHTML = this._originalOptionContents.get(value);
-			}
-
-			// Remove any display styling
-			if (
-				option.hasAttribute('style') &&
-				option.getAttribute('style').includes('display:')
-			) {
-				const styleAttr = option.getAttribute('style');
-				if (
-					styleAttr.trim() === 'display: none;' ||
-					styleAttr.trim() === 'display: block;'
-				) {
-					option.removeAttribute('style');
-				} else {
-					option.setAttribute(
-						'style',
-						styleAttr.replace(/display:\s*[^;]+;?/gi, '').trim(),
-					);
+				const originalContent = this._originalOptionContents.get(value)!;
+				// Only update if different, to minimize DOM changes
+				if (option.innerHTML !== originalContent) {
+					option.innerHTML = originalContent;
 				}
 			}
 		});
+
+		this._clearNoResultsMessage(); // Ensure no results message is cleared when resetting
 	}
 
 	private _handleNoResults(visibleOptionsCount: number) {
-		if (visibleOptionsCount === 0 && this._searchInput.value.trim() !== '') {
+		if (visibleOptionsCount === 0 && this._searchInput?.value?.trim() !== '') {
 			this._showNoResultsMessage();
 		} else {
 			this._clearNoResultsMessage();
@@ -319,35 +359,25 @@ export class KTSelectSearch {
 	 * Public method to explicitly clear all search highlights
 	 * This is called when search is reset or selection changes
 	 */
-	public clearSearchHighlights() {
+	public clearSearch() {
 		// Restore original option content (removes highlighting)
-		const options = Array.from(
+		const optionsToClear = Array.from(
 			this._select.getOptionsElement(),
 		) as HTMLElement[];
 
-		options.forEach((option) => {
+		// Ensure cache is available
+		if (this._originalOptionContents.size === 0 && optionsToClear.length > 0) {
+			this._cacheOriginalOptionContents();
+		}
+
+		optionsToClear.forEach((option) => {
 			const value = option.getAttribute('data-value');
 			if (value && this._originalOptionContents.has(value)) {
-				option.innerHTML = this._originalOptionContents.get(value);
-			}
-		});
-
-		// Also clear highlights from the display element
-		this._clearDisplayHighlights();
-	}
-
-	/**
-	 * Clear any highlights from the display element (selected values)
-	 */
-	private _clearDisplayHighlights() {
-		// Implementation for clearing display highlights
-		const options = Array.from(
-			this._select.getOptionsElement(),
-		) as HTMLElement[];
-
-		options.forEach((option) => {
-			if (option.dataset && !option.dataset.originalText) {
-				option.dataset.originalText = option.innerHTML;
+				const originalContent = this._originalOptionContents.get(value)!;
+				// Only restore if different
+				if (option.innerHTML !== originalContent) {
+					option.innerHTML = originalContent;
+				}
 			}
 		});
 	}
@@ -358,11 +388,11 @@ export class KTSelectSearch {
 	public refreshOptionCache(): void {
 		// Re-cache all option contents
 		this._originalOptionContents.clear();
-		const options = Array.from(
+		const currentOptions = Array.from(
 			this._select.getOptionsElement(),
 		) as HTMLElement[];
 
-		options.forEach((option) => {
+		currentOptions.forEach((option) => {
 			const value = option.getAttribute('data-value');
 			if (value) {
 				this._originalOptionContents.set(value, option.innerHTML);
@@ -370,6 +400,16 @@ export class KTSelectSearch {
 		});
 	}
 
+	/**
+	 * Called after search (local or remote via KTSelect) to reset focus.
+	 */
+	public refreshAfterSearch(): void {
+		this._focusManager.resetFocus();
+		this._focusManager.focusFirst();
+		// Re-cache original contents as options might have changed (especially after remote search)
+		this.refreshOptionCache();
+	}
+
 	/**
 	 * Clean up all resources used by the search module
 	 */
@@ -378,13 +418,14 @@ export class KTSelectSearch {
 		this._removeEventListeners();
 
 		// Clear all references
-		this._focusManager.dispose();
-		this._eventManager.removeAllListeners(null);
+		if (this._focusManager) {
+			this._focusManager.dispose();
+		}
 
 		// Clear cached content
 		this._originalOptionContents.clear();
 
 		// Clear highlight elements
-		this.clearSearchHighlights();
+		this.clearSearch();
 	}
 }