@keenthemes/ktui 1.0.11 → 1.0.13

package/src/components/select/search.ts

@@ -3,10 +3,10 @@
  * Copyright 2025 by Keenthemes Inc
  */
 
+import { KTSelectConfigInterface } from './config';
 import { KTSelect } from './select';
 import { defaultTemplates } from './templates';
 import {
-	handleDropdownKeyNavigation,
 	filterOptions,
 	FocusManager,
 	EventManager,
@@ -17,10 +17,9 @@ export class KTSelectSearch {
 	private _searchInput: HTMLInputElement;
 	private _noResultsElement: HTMLElement | null = null;
 	private _originalOptionContents = new Map<string, string>();
-	private _boundKeyNavHandler: (event: KeyboardEvent) => void;
 	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;
@@ -34,7 +33,6 @@ export class KTSelectSearch {
 			'[data-kt-select-option]',
 			select.getConfig(),
 		);
-		this._boundKeyNavHandler = this._handleKeyboardNavigation.bind(this);
 		this.handleSearchInput = this._handleSearchInput.bind(this);
 		this._config = select.getConfig();
 		this._cacheOriginalOptionContents();
@@ -54,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);
 				});
@@ -90,56 +95,50 @@ export class KTSelectSearch {
 					});
 				}
 
-				// Add keyboard navigation for search results
-				// This is stopping event propagation to prevent conflicts
-				this._eventManager.addListener(
-					this._searchInput,
-					'keydown',
-					this._boundKeyNavHandler,
-				);
-
-				// 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();
-					// Always clear highlights when dropdown closes
-					this.clearSearchHighlights();
-					if (!this._searchInput.value) {
-						this._resetAllOptions();
-					}
-					// Clear the search input when dropdown closes if configured
-					if (this._select.getConfig().clearSearchOnClose) {
-						this._searchInput.value = '';
-					}
+					// 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
 					}
 				});
 			}
@@ -156,54 +155,44 @@ export class KTSelectSearch {
 	}
 
 	/**
-	 * Handle keyboard navigation for search results
+	 * Handles keydown events on the search input for navigation and actions.
 	 */
-	private _handleKeyboardNavigation(event: KeyboardEvent) {
-		// Stop propagation to prevent multiple handlers from firing
-		event.stopPropagation();
-
-		if (this._config.debug) console.log('Search module keydown:', event.key);
-
-		const visibleOptions = this._focusManager.getVisibleOptions();
-		if (visibleOptions.length === 0) return;
-
-		// Use the shared keyboard navigation handler with custom callbacks
-		handleDropdownKeyNavigation(
-			event,
-			this._select,
-			{
-				multiple: this._select.getConfig().multiple,
-				closeOnSelect: this._select.getConfig().closeOnSelect,
-			},
-			{
-				onArrowDown: () => this._focusManager.focusNext(),
-				onArrowUp: () => this._focusManager.focusPrevious(),
-				onEnter: () => this._selectFocusedOption(),
-				onClose: () => {
-					if (event.key === 'Escape') {
-						this.clearSearchHighlights();
+	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
 					}
-				},
-			},
-		);
-	}
-
-	/**
-	 * Select the currently focused option
-	 */
-	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);
-			}
+				}
+				break;
+			case 'Escape':
+				event.preventDefault();
+				this._searchInput.value = '';
+				this.clearSearch();
+				this._resetAllOptions();
+				this._clearNoResultsMessage();
+				this._focusManager.focusFirst();
+				break;
+			default:
+				break;
 		}
 	}
 
@@ -214,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
 		}
 	}
 
@@ -269,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),
+		);
 	}
 
 	/**
@@ -296,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();
@@ -344,11 +335,11 @@ export class KTSelectSearch {
 		this._clearNoResultsMessage();
 
 		const config = this._select.getConfig();
-		this._noResultsElement = defaultTemplates.noResults(config);
+		this._noResultsElement = defaultTemplates.empty(config);
 
 		const dropdownElement = this._select.getDropdownElement();
 		const optionsContainer = dropdownElement.querySelector(
-			'[data-kt-select-options-container]',
+			'[data-kt-select-options]',
 		);
 		if (optionsContainer) {
 			optionsContainer.appendChild(this._noResultsElement);
@@ -368,28 +359,27 @@ 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);
+				const originalContent = this._originalOptionContents.get(value)!;
+				// Only restore if different
+				if (option.innerHTML !== originalContent) {
+					option.innerHTML = originalContent;
+				}
 			}
 		});
-
-		// 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
 	}
 
 	/**
@@ -398,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);
@@ -410,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
 	 */
@@ -418,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();
 	}
 }