@keenthemes/ktui 1.0.12 → 1.0.14

package/src/components/select/select.ts

@@ -37,7 +37,6 @@ export class KTSelect extends KTComponent {
 	private _displayElement: HTMLElement;
 	private _dropdownContentElement: HTMLElement;
 	private _searchInputElement: HTMLInputElement | null;
-	private _valueDisplayElement: HTMLElement;
 	private _options: NodeListOf<HTMLElement>;
 
 	// State
@@ -52,6 +51,7 @@ export class KTSelect extends KTComponent {
 	private _focusManager: FocusManager;
 	private _eventManager: EventManager;
 	private _typeToSearchBuffer: TypeToSearchBuffer = new TypeToSearchBuffer();
+	private _mutationObserver: MutationObserver | null = null;
 
 	/**
 	 * Constructor: Initializes the select component
@@ -167,21 +167,23 @@ export class KTSelect extends KTComponent {
 		);
 		if (!optionsContainer) return;
 
+		// Clear previous messages
+		optionsContainer.innerHTML = '';
+
 		switch (type) {
 			case 'error':
-				optionsContainer.innerHTML = defaultTemplates.error({
+				optionsContainer.appendChild(defaultTemplates.error({
 					...this._config,
 					errorMessage: message,
-				});
+				}));
 				break;
 			case 'loading':
-				optionsContainer.innerHTML = defaultTemplates.loading(
+				optionsContainer.appendChild(defaultTemplates.loading(
 					this._config,
 					message || 'Loading...',
-				).outerHTML;
+				));
 				break;
 			case 'empty':
-				optionsContainer.innerHTML = '';
 				optionsContainer.appendChild(defaultTemplates.empty(this._config));
 				break;
 		}
@@ -397,6 +399,7 @@ export class KTSelect extends KTComponent {
 			this._displayElement,
 			this._dropdownContentElement,
 			this._config,
+			this, // Pass the KTSelect instance to KTSelectDropdown
 		);
 
 		// Update display and set ARIA attributes
@@ -406,14 +409,9 @@ export class KTSelect extends KTComponent {
 
 		// Attach event listeners after all modules are initialized
 		this._attachEventListeners();
-	}
 
-	/**
-	 * Initialize options HTML from data
-	 */
-	// private _initializeOptionsHtml() {
-	// 	this._generateOptionsHtml(this._element);
-	// }
+		this._observeNativeSelect();
+	}
 
 	/**
 	 * Creates the HTML structure for the select component
@@ -431,7 +429,17 @@ export class KTSelect extends KTComponent {
 
 		// Move classes from original select to display element
 		if (this._element.classList.length > 0) {
-			displayElement.classList.add(...Array.from(this._element.classList));
+			// Exclude kt-select class from being added to the wrapper element
+			const classes = Array.from(this._element.classList).filter(
+				(className) => className !== 'kt-select',
+			);
+			wrapperElement.classList.add(...classes);
+
+			// If element has class kt-select, move it to display element
+			if (this._element.classList.contains('kt-select')) {
+				displayElement.classList.add('kt-select');
+			}
+
 			this._element.className = '';
 		}
 
@@ -480,7 +488,7 @@ export class KTSelect extends KTComponent {
 
 		// Insert after the original element
 		this._element.after(wrapperElement);
-		this._element.style.display = 'none';
+		this._element.classList.add('hidden');
 	}
 
 	/**
@@ -514,10 +522,6 @@ export class KTSelect extends KTComponent {
 			this._searchInputElement = this._displayElement as HTMLInputElement;
 		}
 
-		this._valueDisplayElement = this._wrapperElement.querySelector(
-			`[data-kt-select-value]`,
-		) as HTMLElement;
-
 		this._options = this._wrapperElement.querySelectorAll(
 			`[data-kt-select-option]`,
 		) as NodeListOf<HTMLElement>;
@@ -537,17 +541,10 @@ export class KTSelect extends KTComponent {
 			this._handleDropdownOptionClick.bind(this),
 		);
 
-		// Only attach click handler to display element
-		// this._eventManager.addListener(
-		// 	this._wrapperElement,
-		// 	'click',
-		// 	this._handleDropdownClick.bind(this),
-		// );
-
-		// Attach centralized keyboard handler
-		const keyboardTarget = this._searchInputElement || this._wrapperElement;
-		if (keyboardTarget) {
-			keyboardTarget.addEventListener('keydown', this._handleKeyboardEvent.bind(this));
+		// Attach centralized keyboard handler to the wrapper element.
+		// Events from focusable children like _displayElement or _searchInputElement (if present) will bubble up.
+		if (this._wrapperElement) {
+			this._wrapperElement.addEventListener('keydown', this._handleKeyboardEvent.bind(this));
 		}
 	}
 
@@ -729,28 +726,6 @@ export class KTSelect extends KTComponent {
 	 * ========================================================================
 	 */
 
-	/**
-	 * Toggle dropdown visibility
-	 * @deprecated
-	 */
-	public toggleDropdown() {
-		if (this._config.disabled) {
-			if (this._config.debug) console.log('toggleDropdown: select is disabled, not opening');
-			return;
-		}
-		if (this._config.debug) console.log('toggleDropdown called');
-		if (this._dropdownModule) {
-			// Always use the dropdown module's state to determine whether to open or close
-			if (this._dropdownModule.isOpen()) {
-				if (this._config.debug) console.log('Dropdown is open, closing...');
-				this.closeDropdown();
-			} else {
-				if (this._config.debug) console.log('Dropdown is closed, opening...');
-				this.openDropdown();
-			}
-		}
-	}
-
 	/**
 	 * Open the dropdown
 	 */
@@ -791,17 +766,6 @@ export class KTSelect extends KTComponent {
 		this._dispatchEvent('show');
 		this._fireEvent('show');
 
-		// Focus search input if configured and exists
-		if (
-			this._config.enableSearch &&
-			this._config.searchAutofocus &&
-			this._searchInputElement
-		) {
-			setTimeout(() => {
-				this._searchInputElement.focus();
-			}, 50);
-		}
-
 		// Update ARIA states
 		this._setAriaAttributes();
 
@@ -830,15 +794,15 @@ export class KTSelect extends KTComponent {
 		if (this._config.debug)
 			console.log('Closing dropdown via dropdownModule...');
 
-		// Clear search input and highlights if the dropdown is closing
+		// Clear search input if the dropdown is closing
 		if (this._searchModule && this._searchInputElement) {
 			// Clear search input if configured to do so
 			if (this._config.clearSearchOnClose) {
 				this._searchInputElement.value = '';
 			}
 
-			// Always clear the highlights when dropdown closes
-			this._searchModule.clearSearchHighlights();
+			// Clear search input when dropdown closes
+			this._searchModule.clearSearch();
 		}
 
 		// Set our internal flag to match what we're doing
@@ -878,11 +842,12 @@ export class KTSelect extends KTComponent {
 		const selectedOptions = this.getSelectedOptions();
 		if (selectedOptions.length === 0) return;
 
-		// Get the first selected option element
-		const firstSelectedValue = selectedOptions[0];
-
-		// Use the FocusManager to focus on the option
-		this._focusManager.focusOptionByValue(firstSelectedValue);
+		// Iterate through selected options and focus the first one that is visible
+		for (const value of selectedOptions) {
+			if (this._focusManager && this._focusManager.focusOptionByValue(value)) {
+				break; // Stop after focusing the first found selected and visible option
+			}
+		}
 	}
 
 	/**
@@ -954,38 +919,60 @@ export class KTSelect extends KTComponent {
 	 */
 	public updateSelectedOptionDisplay() {
 		const selectedOptions = this.getSelectedOptions();
+		const tagsEnabled = this._config.tags && this._tagsModule;
+		const valueDisplayEl = this.getValueDisplayElement();
 
-		// Tag mode: render tags if enabled
-		if (this._config.tags && this._tagsModule) {
+		if (tagsEnabled) {
+			// Tags module will render tags if selectedOptions > 0, or clear them if selectedOptions === 0.
 			this._tagsModule.updateTagsDisplay(selectedOptions);
-			return;
+		}
+
+		// Guard against valueDisplayEl being null due to template modifications
+		if (!valueDisplayEl) {
+			if (this._config.debug) {
+				console.warn('KTSelect: Value display element is null. Cannot update display or placeholder. Check template for [data-kt-select-value].');
+			}
+			return; // Nothing to display on if the element is missing
 		}
 
 		if (typeof this._config.renderSelected === 'function') {
-			// Use the custom renderSelected function if provided
-			this._valueDisplayElement.innerHTML = this._config.renderSelected(selectedOptions);
+			valueDisplayEl.innerHTML = this._config.renderSelected(selectedOptions);
 		} else {
-
 			if (selectedOptions.length === 0) {
-				const placeholder = defaultTemplates.placeholder(this._config);
-				this._valueDisplayElement.replaceChildren(placeholder);
-
+				// No options selected: display placeholder.
+				// This runs if tags are off, OR if tags are on but no items are selected (tags module would have cleared tags).
+				const placeholderEl = defaultTemplates.placeholder(this._config);
+				valueDisplayEl.replaceChildren(placeholderEl);
 			} else {
-				let content = '';
-
-				if (this._config.displayTemplate) {
-					const selectedValues = this.getSelectedOptions();
-					content = this.renderDisplayTemplateForSelected(selectedValues);
+				// Options are selected.
+				if (tagsEnabled) {
+					// Tags are enabled AND options are selected: tags module has rendered them.
+					// Clear valueDisplayEl as tags are the primary display.
+					valueDisplayEl.innerHTML = '';
 				} else {
-					// If no displayTemplate is provided, use the default comma-separated list of selected options
-					content = this.getSelectedOptionsText();
+					// Tags are not enabled AND options are selected: render normal text display.
+					let content = '';
+					if (this._config.displayTemplate) {
+						content = this.renderDisplayTemplateForSelected(this.getSelectedOptions());
+					} else {
+						content = this.getSelectedOptionsText();
+					}
+					valueDisplayEl.innerHTML = content;
 				}
-
-				this._valueDisplayElement.innerHTML = content;
 			}
 		}
 	}
 
+	/**
+	 * Check if an option was originally disabled in the HTML
+	 */
+	private _isOptionOriginallyDisabled(value: string): boolean {
+		const originalOption = Array.from(this._element.querySelectorAll('option')).find(
+			(opt) => opt.value === value
+		) as HTMLOptionElement;
+		return originalOption ? originalOption.disabled : false;
+	}
+
 	/**
 	 * Update CSS classes for selected options
 	 */
@@ -1007,17 +994,23 @@ export class KTSelect extends KTComponent {
 		allOptions.forEach((option) => {
 			const optionValue = option.getAttribute('data-value');
 			if (!optionValue) return;
+
 			const isSelected = selectedValues.includes(optionValue);
+			const isOriginallyDisabled = this._isOptionOriginallyDisabled(optionValue);
+
 			if (isSelected) {
 				option.classList.add('selected');
 				option.setAttribute('aria-selected', 'true');
+				// Selected options should not be visually hidden or disabled by maxSelections logic
 				option.classList.remove('hidden');
 				option.classList.remove('disabled');
 				option.removeAttribute('aria-disabled');
 			} else {
 				option.classList.remove('selected');
 				option.setAttribute('aria-selected', 'false');
-				if (maxReached) {
+
+				// An option should be disabled if it was originally disabled OR if maxSelections is reached
+				if (isOriginallyDisabled || maxReached) {
 					option.classList.add('disabled');
 					option.setAttribute('aria-disabled', 'true');
 				} else {
@@ -1085,18 +1078,6 @@ export class KTSelect extends KTComponent {
 	 * ========================================================================
 	 */
 
-	/**
-	 * Handle display element click
-	 * @deprecated
-	 */
-	private _handleDropdownClick(event: Event) {
-		if (this._config.debug)
-			console.log('Display element clicked', event.target);
-		event.preventDefault();
-		event.stopPropagation(); // Prevent event bubbling
-		this.toggleDropdown();
-	}
-
 	/**
 	 * Handle click within the dropdown
 	 */
@@ -1145,6 +1126,13 @@ export class KTSelect extends KTComponent {
 
 		if (this._config.debug) console.log('Option clicked:', optionValue);
 
+		// If in single-select mode and the clicked option is already selected, just close the dropdown.
+		if (!this._config.multiple && this._state.isSelected(optionValue)) {
+			if (this._config.debug) console.log('Single select mode: clicked already selected option. Closing dropdown.');
+			this.closeDropdown();
+			return;
+		}
+
 		// Use toggleSelection instead of _selectOption to prevent re-rendering
 		this.toggleSelection(optionValue);
 	}
@@ -1221,7 +1209,14 @@ export class KTSelect extends KTComponent {
 	 * Get value display element
 	 */
 	public getValueDisplayElement() {
-		return this._valueDisplayElement;
+		return this._displayElement;
+	}
+
+	/**
+	 * Get wrapper element
+	 */
+	public getWrapperElement(): HTMLElement {
+		return this._wrapperElement;
 	}
 
 	/**
@@ -1253,7 +1248,7 @@ export class KTSelect extends KTComponent {
 						// Otherwise, remove just the display property
 						option.setAttribute(
 							'style',
-							styleAttr.replace(/display:\s*[^;]+;?/gi, '').trim(),
+							styleAttr?.replace(/display:\s*[^;]+;?/gi, '')?.trim(),
 						);
 					}
 				}
@@ -1265,7 +1260,7 @@ export class KTSelect extends KTComponent {
 			this._searchInputElement.value = '';
 			// If we have a search module, clear any search filtering
 			if (this._searchModule) {
-				this._searchModule.clearSearchHighlights();
+				this._searchModule.clearSearch();
 			}
 		}
 	}
@@ -1297,7 +1292,7 @@ export class KTSelect extends KTComponent {
 		// Get current selection state
 		const isSelected = this._state.isSelected(value);
 		if (this._config.debug)
-			console.log(`toggleSelection called for value: ${value}, isSelected: ${isSelected}, multiple: ${this._config.multiple}, closeOnSelect: ${this._config.closeOnSelect}`);
+			console.log(`toggleSelection called for value: ${value}, isSelected: ${isSelected}, multiple: ${this._config.multiple}`);
 
 		// If already selected in single select mode, do nothing (can't deselect in single select)
 		if (isSelected && !this._config.multiple) {
@@ -1309,9 +1304,9 @@ export class KTSelect extends KTComponent {
 		if (this._config.debug)
 			console.log(`Toggling selection for option: ${value}, currently selected: ${isSelected}`);
 
-		// Ensure any search highlights are cleared when selection changes
+		// Ensure any search input is cleared when selection changes
 		if (this._searchModule) {
-			this._searchModule.clearSearchHighlights();
+			this._searchModule.clearSearch();
 		}
 
 		// Toggle the selection in the state
@@ -1341,14 +1336,13 @@ export class KTSelect extends KTComponent {
 		this._updateSelectedOptionClass();
 
 		// For single select mode, always close the dropdown after selection
-		// For multiple select mode, only close if closeOnSelect is true
 		if (!this._config.multiple) {
 			if (this._config.debug)
 				console.log('About to call closeDropdown() for single select mode - always close after selection');
 			this.closeDropdown();
-		} else if (this._config.closeOnSelect) {
+		} else {
 			if (this._config.debug)
-				console.log('About to call closeDropdown() for multiple select with closeOnSelect:true');
+				console.log('About to call closeDropdown() for multiple select');
 			this.closeDropdown();
 		}
 
@@ -1476,9 +1470,9 @@ export class KTSelect extends KTComponent {
 							// Update options in the dropdown
 							this._updateSearchResults(items);
 
-							// Refresh the search module's option cache if search is enabled
-							if (this._searchModule && this._config.enableSearch) {
-								this._searchModule.refreshOptionCache();
+							// Refresh the search module to update focus and cache
+							if (this._searchModule) {
+								this._searchModule.refreshAfterSearch();
 							}
 						})
 						.catch((error) => {
@@ -1606,20 +1600,49 @@ export class KTSelect extends KTComponent {
 	 * Centralized keyboard event handler for all select modes
 	 */
 	private _handleKeyboardEvent(event: KeyboardEvent) {
+		// If the event target is the search input and the event was already handled (defaultPrevented),
+		// then return early to avoid duplicate processing by this broader handler.
+		if (event.target === this._searchInputElement && event.defaultPrevented) {
+			return;
+		}
+
 		const isOpen = this._dropdownIsOpen;
 		const config = this._config;
 		const focusManager = this._focusManager;
 		const buffer = this._typeToSearchBuffer;
 
-		// Ignore modifier keys
+		// If the event target is the search input, let it handle most typing keys naturally.
+		if (event.target === this._searchInputElement) {
+			// Allow navigation keys like ArrowDown, ArrowUp, Escape, Enter (for search/selection) to be handled by the logic below.
+			// For other keys (characters, space, backspace, delete), let the input field process them.
+			if (event.key !== 'ArrowDown' && event.key !== 'ArrowUp' &&
+			    event.key !== 'Escape' && event.key !== 'Enter' && event.key !== 'Tab' &&
+			    event.key !== 'Home' && event.key !== 'End') {
+				// If it's a character key and we are NOT type-to-searching (because search has focus)
+				// then let the input field handle it for its own value.
+				// The search module's 'input' event will handle filtering based on the input's value.
+				buffer.clear(); // Clear type-to-search buffer when typing in search field
+				return;
+			}
+			// For Enter specifically in search input, we might want to select the focused option or submit search.
+			// This is handled later in the switch.
+		}
+
+		// Ignore modifier keys (except for specific combinations if added later)
 		if (event.altKey || event.ctrlKey || event.metaKey) return;
 
-		// Type-to-search: only for single char keys
-		if (event.key.length === 1 && !event.repeat && !event.key.match(/\s/)) {
+		// Type-to-search: only for single char keys, when search input does not have focus
+		if (event.key.length === 1 && !event.repeat && !event.key.match(/\s/) && document.activeElement !== this._searchInputElement) {
 			buffer.push(event.key);
 			const str = buffer.getBuffer();
+			if (isOpen) {
 			focusManager.focusByString(str);
-			return;
+			} else {
+				// If closed, type-to-search could potentially open and select.
+				// For now, let's assume it only works when open or opens it first.
+				// Or, we could find the matching option and set it directly without opening.
+			}
+			return; // Type-to-search handles the event
 		}
 
 		switch (event.key) {
@@ -1650,18 +1673,29 @@ export class KTSelect extends KTComponent {
 			case 'Enter':
 			case ' ': // Space
 				if (isOpen) {
-					const focused = focusManager.getFocusedOption();
-					if (focused) {
-						const value = focused.dataset.value;
-						if (value) {
-							this.toggleSelection(value);
-							if (!config.multiple && config.closeOnSelect) {
-								this.closeDropdown();
-							}
+					const focusedOptionEl = this._focusManager.getFocusedOption();
+					if (focusedOptionEl) {
+						const val = focusedOptionEl.dataset.value;
+						// If single select, and the item is already selected, just close.
+						if (val !== undefined && !this._config.multiple && this._state.isSelected(val)) {
+							if (this._config.debug) console.log('Enter on already selected item in single-select mode. Closing.');
+							this.closeDropdown();
+							event.preventDefault();
+							break;
 						}
 					}
-					// Prevent form submit
-					event.preventDefault();
+
+					// Proceed with selection if not handled above
+					this.selectFocusedOption();
+
+					// Close dropdown if configured to do so (for new selections)
+					if (!this._config.multiple) {
+						// This will also be true for the case handled above, but closeDropdown is idempotent.
+						// However, the break above prevents this from being reached for that specific case.
+						this.closeDropdown();
+					}
+					event.preventDefault(); // Prevent form submission or other default actions
+					break;
 				} else {
 					this.openDropdown();
 				}
@@ -1707,4 +1741,78 @@ export class KTSelect extends KTComponent {
 		));
 		return contentArray.join(displaySeparator);
 	}
+
+	public getDisplayElement(): HTMLElement {
+		return this._displayElement;
+	}
+
+	private _observeNativeSelect() {
+		if (this._mutationObserver) return; // Prevent double observers
+		this._mutationObserver = new MutationObserver((mutations) => {
+			let needsRebuild = false;
+			let needsSelectionSync = false;
+
+			for (const mutation of mutations) {
+				if (mutation.type === 'childList') {
+					// Option(s) added or removed
+					needsRebuild = true;
+				} else if (mutation.type === 'attributes' && mutation.target instanceof HTMLOptionElement) {
+					if (mutation.attributeName === 'selected') {
+						needsSelectionSync = true;
+					}
+				}
+			}
+
+			if (needsRebuild) {
+				// Rebuild the custom dropdown options
+				this._rebuildOptionsFromNative();
+			}
+			if (needsSelectionSync) {
+				this._syncSelectionFromNative();
+			}
+		});
+
+		this._mutationObserver.observe(this._element, {
+			childList: true,
+			attributes: true,
+			subtree: true,
+			attributeFilter: ['selected'],
+		});
+	}
+
+	private _rebuildOptionsFromNative() {
+		// Remove and rebuild the custom dropdown options from the native select
+		if (this._dropdownContentElement) {
+			const optionsContainer = this._dropdownContentElement.querySelector('[data-kt-select-options]');
+			if (optionsContainer) {
+				optionsContainer.innerHTML = '';
+				const options = Array.from(this._element.querySelectorAll('option'));
+				options.forEach((optionElement) => {
+					if (
+						optionElement.value === '' &&
+						optionElement.textContent.trim() === ''
+					) {
+						return;
+					}
+					const selectOption = new KTSelectOption(optionElement, this._config);
+					const renderedOption = selectOption.render();
+					optionsContainer.appendChild(renderedOption);
+				});
+				// Update internal references
+				this._options = this._wrapperElement.querySelectorAll('[data-kt-select-option]') as NodeListOf<HTMLElement>;
+			}
+		}
+		// Sync selection after rebuilding
+		this._syncSelectionFromNative();
+		this.updateSelectedOptionDisplay();
+		this._updateSelectedOptionClass();
+	}
+
+	private _syncSelectionFromNative() {
+		// Sync internal state from the native select's selected options
+		const selected = Array.from(this._element.querySelectorAll('option:checked')).map(opt => (opt as HTMLOptionElement).value);
+		this._state.setSelectedOptions(this._config.multiple ? selected : selected[0] || '');
+		this.updateSelectedOptionDisplay();
+		this._updateSelectedOptionClass();
+	}
 }

package/src/components/select/tags.ts

@@ -6,7 +6,7 @@
 import { KTSelectConfigInterface } from './config';
 import { KTSelect } from './select';
 import { defaultTemplates } from './templates';
-import { EventManager, renderTemplateString } from './utils';
+import { EventManager } from './utils';
 
 /**
  * KTSelectTags - Handles tags-specific functionality for KTSelect
@@ -83,32 +83,6 @@ export class KTSelectTags {
 		});
 	}
 
-	/**
-	 * Get the label/text for an option by its value
-	 */
-	private _getOptionLabel(optionValue: string): string {
-		// First look for an option element in the dropdown with matching value
-		const optionElements = this._select.getOptionsElement();
-		for (const option of Array.from(optionElements)) {
-			if ((option as HTMLElement).dataset.value === optionValue) {
-				return (option as HTMLElement).textContent?.trim() || optionValue;
-			}
-		}
-
-		// If not found in dropdown, look in original select element
-		const originalOptions = this._select
-			.getElement()
-			.querySelectorAll('option');
-		for (const option of Array.from(originalOptions)) {
-			if ((option as HTMLOptionElement).value === optionValue) {
-				return (option as HTMLOptionElement).textContent?.trim() || optionValue;
-			}
-		}
-
-		// If still not found, return the value itself
-		return optionValue;
-	}
-
 	/**
 	 * Remove a tag and its selection
 	 */