@keenthemes/ktui 1.0.12 → 1.0.13

package/src/components/select/combobox.ts

@@ -6,6 +6,7 @@
 import { KTSelectConfigInterface } from './config';
 import { KTSelect } from './select';
 import { filterOptions, renderTemplateString, stringToElement } from './utils';
+import { defaultTemplates } from './templates';
 
 /**
  * KTSelectCombobox - Handles combobox-specific functionality for KTSelect
@@ -17,57 +18,36 @@ export class KTSelectCombobox {
 	private _clearButtonElement: HTMLElement | null;
 	private _boundInputHandler: (event: Event) => void;
 	private _boundClearHandler: (event: MouseEvent) => void;
-	private _valuesContainerElement: HTMLElement | null;
+	private _valuesContainerElement: HTMLElement | null; // For tags or displayTemplate output
 
 	constructor(select: KTSelect) {
 		this._select = select;
 		this._config = select.getConfig();
 
-		// Get the display element (could be the input directly or a parent div)
-		const displayElement = select.getValueDisplayElement();
-
-		// Find the input element - either it's the display element itself or a child
-		this._searchInputElement =
-			displayElement.tagName === 'INPUT'
-				? (displayElement as HTMLInputElement)
-				: displayElement.querySelector('input[data-kt-select-search]');
-
-		// Find the clear button robustly
-		let clearButtonContainer: HTMLElement | null = null;
-		if (displayElement.tagName === 'DIV') {
-			clearButtonContainer = displayElement;
-		} else if (displayElement.tagName === 'INPUT') {
-			clearButtonContainer = displayElement.parentElement as HTMLElement;
-		}
-
-		this._clearButtonElement = clearButtonContainer
-			? clearButtonContainer.querySelector('[data-kt-select-clear-button]')
-			: null;
+		const displayElement = select.getDisplayElement(); // KTSelect's main display element for combobox
 
-		this._valuesContainerElement = displayElement?.closest('[data-kt-select-combobox]')?.querySelector('[data-kt-select-combobox-values]');
+		this._searchInputElement = displayElement.querySelector('input[data-kt-select-search]');
+		this._clearButtonElement = displayElement.querySelector('[data-kt-select-clear-button]');
+		this._valuesContainerElement = displayElement.querySelector('[data-kt-select-combobox-values]');
 
-		// Create bound handler references to allow proper cleanup
 		this._boundInputHandler = this._handleComboboxInput.bind(this);
 		this._boundClearHandler = this._handleClearButtonClick.bind(this);
 
-		// Attach event listeners
 		this._attachEventListeners();
 
-		// Reset combobox search state when dropdown closes
 		this._select.getElement().addEventListener('dropdown.close', () => {
-			this._searchInputElement.value = '';
-			// this._toggleClearButtonVisibility('');
-			this._select.showAllOptions();
+			// When dropdown closes, if not multi-select and not using displayTemplate,
+			// ensure input shows the selected value or placeholder.
+			if (!this._config.multiple && !this._config.displayTemplate) {
+				this.updateDisplay(this._select.getSelectedOptions());
+			} else {
+				// For tags or displayTemplate, the input should be clear for typing.
+				this._searchInputElement.value = '';
+			}
+			this._toggleClearButtonVisibility(this._searchInputElement.value);
+			// this._select.showAllOptions(); // showAllOptions might be too broad, filtering is managed by typing.
 		});
 
-		// When selection changes, update the input value to the selected option's text
-		// this._select.getElement().addEventListener('change', () => {
-		// 	// Only update the input value, do not reset the filter or show all options
-		// 	const selectedValues = this._select.getSelectedOptions();
-		// 	const content = this._select.renderDisplayTemplateForSelected(selectedValues);
-		// 	this._valuesContainerElement?.append(stringToElement(content));
-		// });
-
 		if (this._config.debug) console.log('KTSelectCombobox initialized');
 	}
 
@@ -75,25 +55,13 @@ export class KTSelectCombobox {
 	 * Attach event listeners specific to combobox
 	 */
 	private _attachEventListeners(): void {
-		// First remove any existing listeners to prevent duplicates
 		this._removeEventListeners();
-
-		// Add input event handler to filter options as user types
-		this._searchInputElement.addEventListener('input', this._boundInputHandler);
-
-		// Add clear button click event listener
+		if (this._searchInputElement) { // Ensure element exists
+			this._searchInputElement.addEventListener('input', this._boundInputHandler);
+		}
 		if (this._clearButtonElement) {
-			this._clearButtonElement.addEventListener(
-				'click',
-				this._boundClearHandler,
-			);
+			this._clearButtonElement.addEventListener('click', this._boundClearHandler);
 		}
-
-		if (this._config.debug)
-			console.log(
-				'Combobox event listeners attached to:',
-				this._searchInputElement,
-			);
 	}
 
 	/**
@@ -101,17 +69,10 @@ export class KTSelectCombobox {
 	 */
 	private _removeEventListeners(): void {
 		if (this._searchInputElement) {
-			this._searchInputElement.removeEventListener(
-				'input',
-				this._boundInputHandler,
-			);
+			this._searchInputElement.removeEventListener('input', this._boundInputHandler);
 		}
-
 		if (this._clearButtonElement) {
-			this._clearButtonElement.removeEventListener(
-				'click',
-				this._boundClearHandler,
-			);
+			this._clearButtonElement.removeEventListener('click', this._boundClearHandler);
 		}
 	}
 
@@ -120,19 +81,23 @@ export class KTSelectCombobox {
 	 */
 	private _handleComboboxInput(event: Event): void {
 		const inputElement = event.target as HTMLInputElement;
-		const query = inputElement.value.toLowerCase();
+		const query = inputElement.value;
 
-		if (this._config.debug) console.log('Combobox input event, query:', query);
+		this._toggleClearButtonVisibility(query);
 
-		// Toggle clear button visibility based on input value
-		// this._toggleClearButtonVisibility(query);
-
-		// If dropdown isn't open, open it when user starts typing
-		if (!(this._select as any)._dropdownIsOpen) {
+		if (!(this._select as any).isDropdownOpen()) { // Use public getter
 			this._select.openDropdown();
 		}
+		// For single select without displayTemplate, if user types, they are essentially clearing the previous selection text
+		// The actual selection state isn't cleared until they pick a new option or clear explicitly.
+		// For multi-select or with displayTemplate, the input is purely for search.
+		if (this._config.multiple || this._config.displayTemplate) {
+			// Values are in _valuesContainerElement, input is for search
+		} else {
+			// Single select, no displayTemplate: If user types, it implies they might be changing selection.
+			// We don't clear the actual _select state here, just the visual in input.
+		}
 
-		// Filter options based on input
 		this._filterOptionsForCombobox(query);
 	}
 
@@ -143,35 +108,26 @@ export class KTSelectCombobox {
 		event.preventDefault();
 		event.stopPropagation();
 
-		// Clear the input
 		this._searchInputElement.value = '';
-
-		// Hide the clear button
-		// this._toggleClearButtonVisibility('');
-
-		// Show all options and open dropdown
-		this._select.showAllOptions();
-		this._select.openDropdown();
-
-		// Clear the current selection
-		this._select.clearSelection();
-
-		// Clear the combobox values container if present (for displayTemplate)
+		this._toggleClearButtonVisibility('');
 		if (this._valuesContainerElement) {
 			this._valuesContainerElement.innerHTML = '';
 		}
-
-		// Focus on the input
+		this._select.clearSelection(); // This will also trigger updateSelectedOptionDisplay
+		this._select.showAllOptions(); // Show all options after clearing
+		this._select.openDropdown();
 		this._searchInputElement.focus();
 	}
 
 	/**
-	 * Toggle clear button visibility based on input value
+	 * Toggle clear button visibility based on input value and selection state.
+	 * Clear button should be visible if there's text in input OR if there are selected items (for multi/displayTemplate modes).
 	 */
-	private _toggleClearButtonVisibility(value: string): void {
+	private _toggleClearButtonVisibility(inputValue: string): void {
 		if (!this._clearButtonElement) return;
+		const hasSelectedItems = this._select.getSelectedOptions().length > 0;
 
-		if (value.length > 0) {
+		if (inputValue.length > 0 || (hasSelectedItems && (this._config.multiple || this._config.displayTemplate))) {
 			this._clearButtonElement.classList.remove('hidden');
 		} else {
 			this._clearButtonElement.classList.add('hidden');
@@ -182,11 +138,66 @@ export class KTSelectCombobox {
 	 * Filter options for combobox based on input query
 	 */
 	private _filterOptionsForCombobox(query: string): void {
-		// Use the same filter logic as KTSelectSearch
 		const options = Array.from(this._select.getOptionsElement()) as HTMLElement[];
 		const config = this._select.getConfig();
 		const dropdownElement = this._select.getDropdownElement();
 		filterOptions(options, query, config, dropdownElement);
+		// After filtering, focusManager in KTSelectSearch (if search is also enabled there)
+		// or the main FocusManager should adjust focus if needed.
+		// For combobox, this filtering is the primary search mechanism.
+		// We might need to tell select's focus manager to focus first option.
+		(this._select as any)._focusManager.focusFirst(); // Consider if this is always right
+	}
+
+	/**
+	 * Updates the combobox display (input field or values container) based on selection.
+	 */
+	public updateDisplay(selectedOptions: string[]): void {
+		if (!this._searchInputElement) return;
+
+		// Always clear the values container first if it exists
+		if (this._valuesContainerElement) {
+			this._valuesContainerElement.innerHTML = '';
+		}
+
+		if (this._config.tags && this._valuesContainerElement) { // Combobox + Tags
+			selectedOptions.forEach(value => {
+				// Ensure value is properly escaped for querySelector
+				const optionElement = this._select.getElement().querySelector(`option[value="${CSS.escape(value)}"]`) as HTMLOptionElement;
+				if (optionElement) {
+					const tagElement = defaultTemplates.tag(optionElement, this._config);
+					this._valuesContainerElement.appendChild(tagElement);
+				}
+			});
+			this._searchInputElement.value = ''; // Input field is for typing new searches
+			this._searchInputElement.placeholder = selectedOptions.length > 0 ? '' : (this._config.placeholder || 'Select...');
+
+		} else if (this._config.displayTemplate && this._valuesContainerElement) { // Combobox + DisplayTemplate (no tags)
+			this._valuesContainerElement.innerHTML = this._select.renderDisplayTemplateForSelected(selectedOptions);
+			this._searchInputElement.value = ''; // Input field is for typing new searches
+			this._searchInputElement.placeholder = selectedOptions.length > 0 ? '' : (this._config.placeholder || 'Select...');
+
+		} else if (this._config.multiple && this._valuesContainerElement) { // Combobox + Multiple (no tags, no display template)
+			// For simplicity, join text. A proper tag implementation would be more complex here.
+			this._valuesContainerElement.innerHTML = selectedOptions.map(value => {
+				const optionEl = this._select.getElement().querySelector(`option[value="${CSS.escape(value)}"]`);
+				return optionEl ? optionEl.textContent : '';
+			}).join(', '); // Basic comma separation
+			this._searchInputElement.value = '';
+			this._searchInputElement.placeholder = selectedOptions.length > 0 ? '' : (this._config.placeholder || 'Select...');
+
+		} else if (!this._config.multiple && selectedOptions.length > 0) { // Single select combobox: display selected option's text in the input
+			const selectedValue = selectedOptions[0];
+			const optionElement = this._select.getElement().querySelector(`option[value="${CSS.escape(selectedValue)}"]`);
+			this._searchInputElement.value = optionElement ? optionElement.textContent || '' : '';
+			// placeholder is implicitly handled by input value for single select
+
+		} else { // No selection or not fitting above categories (e.g. single select, no items)
+			this._searchInputElement.value = '';
+			this._searchInputElement.placeholder = this._config.placeholder || 'Select...';
+			// _valuesContainerElement is already cleared if it exists
+		}
+		this._toggleClearButtonVisibility(this._searchInputElement.value);
 	}
 
 	/**

package/src/components/select/config.ts

@@ -42,7 +42,6 @@ export const DefaultConfig: KTSelectConfigInterface = {
 	// Selection Behavior
 	multiple: false, // Enable/disable multi-select
 	maxSelections: null, // Maximum number of selections allowed in multi-select mode (null for unlimited)
-	closeOnSelect: false, // Close the dropdown after selecting an option (single-select only)
 	disabled: false, // Disable the select component
 	isRequired: false, // Make selection required
 
@@ -53,7 +52,6 @@ export const DefaultConfig: KTSelectConfigInterface = {
 	searchMinLength: 0, // Minimum characters required to trigger search
 	searchMaxItems: 50, // Maximum number of search results to display
 	searchNotFoundText: 'No results found', // Text to display when no search results are found
-	searchHighlight: true, // Highlight matching search terms within the options
 	clearSearchOnClose: true, // Clear search input when dropdown closes
 
 	// Multi-Select Display
@@ -88,7 +86,6 @@ export interface KTSelectConfigInterface {
 	// Selection Behavior
 	multiple?: boolean;
 	maxSelections?: number | null;
-	closeOnSelect?: boolean;
 	disabled?: boolean;
 	isRequired?: boolean;
 
@@ -99,7 +96,6 @@ export interface KTSelectConfigInterface {
 	searchMinLength?: number;
 	searchMaxItems?: number;
 	searchNotFoundText?: string;
-	searchHighlight?: boolean;
 	searchDebounce?: number;
 	searchParam?: string;
 	clearSearchOnClose?: boolean;
@@ -154,7 +150,6 @@ export interface KTSelectConfigInterface {
 	loadMoreClass?: string;
 	wrapperClass?: string;
 	errorClass?: string;
-	highlightClass?: string;
 
 	// New Config
 	tags?: boolean;
@@ -164,19 +159,17 @@ export interface KTSelectConfigInterface {
 	placeholderTemplate?: string;
 	displaySeparator?: string;
 	displayTemplate?: string;
-	displayToggle?: boolean;
 	displayMaxSelected?: number;
 	optionTemplate?: string;
 	optionClass?: string;
 	tagTemplate?: string;
-	displayToggleClass?: string;
-	displayToggleTemplate?: string;
 
 	templates?: Partial<typeof coreTemplateStrings>;
 
 	dropdownTemplate?: string;
 
 	// Option Configuration
+	config?: KTSelectConfigInterface; // config from data-kt-select-config attribute
 	optionsConfig?: Record<string, KTSelectConfigInterface>;
 }
 
@@ -200,6 +193,7 @@ export class KTSelectState {
 		return {
 			...DefaultConfig,
 			...config,
+			...config.config,
 		};
 	}
 

package/src/components/select/dropdown.ts

@@ -13,13 +13,14 @@ import KTData from '../../helpers/data';
 import KTComponent from '../component';
 import { KTSelectConfigInterface } from './config';
 import { FocusManager, EventManager } from './utils';
+import { KTSelect } from './select'; // Added import
 
 /**
  * KTSelectDropdown
  *
  * A specialized dropdown implementation for the KTSelect component.
  * This module handles the dropdown functionality for the select component,
- * including positioning, showing/hiding, and keyboard navigation.
+ * including positioning and showing/hiding.
  */
 export class KTSelectDropdown extends KTComponent {
 	protected override readonly _name: string = 'select-dropdown';
@@ -36,6 +37,7 @@ export class KTSelectDropdown extends KTComponent {
 	private _popperInstance: PopperInstance | null = null;
 	private _eventManager: EventManager;
 	private _focusManager: FocusManager;
+	private _ktSelectInstance: KTSelect; // Added instance variable
 
 	/**
 	 * Constructor
@@ -49,6 +51,7 @@ export class KTSelectDropdown extends KTComponent {
 		toggleElement: HTMLElement,
 		dropdownElement: HTMLElement,
 		config: KTSelectConfigInterface,
+		ktSelectInstance: KTSelect, // Added parameter
 	) {
 		super();
 
@@ -56,6 +59,7 @@ export class KTSelectDropdown extends KTComponent {
 		this._toggleElement = toggleElement;
 		this._dropdownElement = dropdownElement;
 		this._config = config;
+		this._ktSelectInstance = ktSelectInstance; // Assign instance
 		this._eventManager = new EventManager();
 		this._focusManager = new FocusManager(
 			dropdownElement,
@@ -92,7 +96,20 @@ export class KTSelectDropdown extends KTComponent {
 		event.preventDefault();
 		event.stopPropagation();
 
-		this.toggle();
+		if (this._config.disabled) {
+			if (this._config.debug)
+				console.log(
+					'KTSelectDropdown._handleToggleClick: select is disabled',
+				);
+			return;
+		}
+
+		// Call KTSelect's methods
+		if (this._ktSelectInstance.isDropdownOpen()) {
+			this._ktSelectInstance.closeDropdown();
+		} else {
+			this._ktSelectInstance.openDropdown();
+		}
 	}
 
 	/**
@@ -107,7 +124,8 @@ export class KTSelectDropdown extends KTComponent {
 			!this._element.contains(target) &&
 			!this._dropdownElement.contains(target)
 		) {
-			this.close();
+			// Call KTSelect's closeDropdown method
+			this._ktSelectInstance.closeDropdown();
 		}
 	}
 
@@ -219,81 +237,50 @@ export class KTSelectDropdown extends KTComponent {
 		}
 	}
 
-	/**
-	 * Toggle the dropdown
-	 */
-	public toggle(): void {
-		if (this._config.disabled) {
-			if (this._config.debug) console.log('KTSelectDropdown.toggle: select is disabled, not toggling');
-			return;
-		}
-		if (this._config.debug)
-			console.log('KTSelectDropdown.toggle called - isOpen:', this._isOpen);
-
-		if (this._isTransitioning) {
-			if (this._config.debug)
-				console.log('KTSelectDropdown.toggle - ignoring during transition');
-			return;
-		}
-
-		if (this._isOpen) {
-			this.close();
-		} else {
-			this.open();
-		}
-	}
-
 	/**
 	 * Open the dropdown
 	 */
 	public open(): void {
 		if (this._config.disabled) {
-			if (this._config.debug) console.log('KTSelectDropdown.open: select is disabled, not opening');
+			if (this._config.debug)
+				console.log(
+					'KTSelectDropdown.open: select is disabled, not opening',
+				);
 			return;
 		}
 		if (this._isOpen || this._isTransitioning) return;
 
-		// Fire before show event
-		const beforeShowEvent = new CustomEvent('kt.select.dropdown.show', {
-			bubbles: true,
-			cancelable: true,
-		});
-		this._element.dispatchEvent(beforeShowEvent);
-
-		if (beforeShowEvent.defaultPrevented) return;
-
 		// Begin opening transition
 		this._isTransitioning = true;
 
-		// Set initial styles - remove display: block and use class toggling instead
+		// Set initial styles
 		this._dropdownElement.classList.remove('hidden');
 		this._dropdownElement.style.opacity = '0';
 
 		// Set dropdown width
 		this._setDropdownWidth();
 
-		// Make sure the element is visible for transitioning
+		// Reflow
 		KTDom.reflow(this._dropdownElement);
 
-		// Apply z-index if configured
+		// Apply z-index
 		if (this._config.dropdownZindex) {
 			this._dropdownElement.style.zIndex =
 				this._config.dropdownZindex.toString();
 		} else {
-			// Auto-calculate z-index
 			const parentZindex = KTDom.getHighestZindex(this._element);
 			if (parentZindex) {
 				this._dropdownElement.style.zIndex = (parentZindex + 1).toString();
 			}
 		}
 
-		// Initialize popper for positioning
+		// Initialize popper
 		this._initPopper();
 
-		// Add active classes
+		// Add active classes for visual state
 		this._dropdownElement.classList.add('open');
 		this._toggleElement.classList.add('active');
-		this._toggleElement.setAttribute('aria-expanded', 'true');
+		// ARIA attributes will be handled by KTSelect
 
 		// Start transition
 		this._dropdownElement.style.opacity = '1';
@@ -302,36 +289,10 @@ export class KTSelectDropdown extends KTComponent {
 		KTDom.transitionEnd(this._dropdownElement, () => {
 			this._isTransitioning = false;
 			this._isOpen = true;
-
-			// Focus the first item if search is enabled
-			if (this._config.enableSearch) {
-				const searchInput = this._dropdownElement.querySelector(
-					'input[type="search"]',
-				);
-				if (searchInput) {
-					(searchInput as HTMLInputElement).focus();
-				}
-			}
-
-			// Fire after show event
-			const afterShowEvent = new CustomEvent('kt.select.dropdown.shown', {
-				bubbles: true,
-			});
-			this._element.dispatchEvent(afterShowEvent);
+			// Focus and events will be handled by KTSelect
 		});
 	}
 
-	/**
-	 * Focus the first option in the dropdown
-	 */
-	private _focusFirstOption(): void {
-		const firstOption = this._focusManager.getVisibleOptions()[0];
-		if (firstOption) {
-			this._focusManager.applyFocus(firstOption);
-			this._focusManager.scrollIntoView(firstOption);
-		}
-	}
-
 	/**
 	 * Close the dropdown
 	 */
@@ -352,42 +313,23 @@ export class KTSelectDropdown extends KTComponent {
 			return;
 		}
 
-		// Fire before hide event
-		const beforeHideEvent = new CustomEvent('kt.select.dropdown.hide', {
-			bubbles: true,
-			cancelable: true,
-		});
-		this._element.dispatchEvent(beforeHideEvent);
-
-		if (beforeHideEvent.defaultPrevented) {
-			if (this._config.debug)
-				console.log(
-					'KTSelectDropdown.close - canceling due to defaultPrevented on beforeHideEvent',
-				);
-			return;
-		}
+		// Events and ARIA will be handled by KTSelect
 
 		if (this._config.debug)
 			console.log('KTSelectDropdown.close - starting transition');
-		// Begin closing transition
 		this._isTransitioning = true;
 
-		// Start transition
 		this._dropdownElement.style.opacity = '0';
 
-		// Use a combination of transition end and a fallback timer
 		let transitionComplete = false;
-
-		// Set a fixed-duration fallback in case the transition event doesn't fire
 		const fallbackTimer = setTimeout(() => {
 			if (!transitionComplete) {
 				if (this._config.debug)
 					console.log('KTSelectDropdown.close - fallback timer triggered');
 				completeTransition();
 			}
-		}, 300); // 300ms should be enough for most transitions
+		}, 300);
 
-		// Setup the transition end function
 		const completeTransition = () => {
 			if (transitionComplete) return;
 			transitionComplete = true;
@@ -395,35 +337,28 @@ export class KTSelectDropdown extends KTComponent {
 
 			if (this._config.debug)
 				console.log('KTSelectDropdown.close - transition ended');
-			// Remove active classes
+
 			this._dropdownElement.classList.add('hidden');
 			this._dropdownElement.classList.remove('open');
 			this._toggleElement.classList.remove('active');
-			this._toggleElement.setAttribute('aria-expanded', 'false');
-
-			// Reset styles - replace display: none with adding hidden class
-			this._dropdownElement.classList.add('hidden');
-			this._dropdownElement.style.opacity = '';
-			this._dropdownElement.style.zIndex = '';
+			// ARIA attributes will be handled by KTSelect
 
-			// Destroy popper
 			this._destroyPopper();
 
-			// Update state
 			this._isTransitioning = false;
 			this._isOpen = false;
 
-			// Fire after hide event
-			const afterHideEvent = new CustomEvent('kt.select.dropdown.hidden', {
-				bubbles: true,
-			});
-			this._element.dispatchEvent(afterHideEvent);
+			// Events will be handled by KTSelect
+
 			if (this._config.debug)
-				console.log('KTSelectDropdown.close - complete, events fired');
+				console.log('KTSelectDropdown.close - visual part complete');
 		};
 
-		// Handle transition end via the utility but also have the fallback
 		KTDom.transitionEnd(this._dropdownElement, completeTransition);
+
+		if (KTDom.getCssProp(this._dropdownElement, 'transition-duration') === '0s') {
+			completeTransition();
+		}
 	}
 
 	/**