@keenthemes/ktui 1.0.20 → 1.0.21

package/src/components/select/select.ts

@@ -39,6 +39,9 @@ export class KTSelect extends KTComponent {
 	private _searchInputElement: HTMLInputElement | null;
 	private _options: NodeListOf<HTMLElement>;
 
+	// Cached DOM references for performance
+	private _optionsContainer: HTMLElement | null = null;
+
 	// State
 	private _dropdownIsOpen: boolean = false;
 	private _state: KTSelectState;
@@ -104,6 +107,11 @@ export class KTSelect extends KTComponent {
 		if (this._config.debug)
 			console.log('Initializing remote data with URL:', this._config.dataUrl);
 
+		// For remote data, we need to create the HTML structure first
+		// so that the component can be properly initialized
+		this._createHtmlStructure();
+		this._setupElementReferences();
+
 		// Show loading state
 		this._renderLoadingState();
 
@@ -125,7 +133,12 @@ export class KTSelect extends KTComponent {
 
 						if (this._config.debug)
 							console.log('Generating options HTML from remote data');
-						this._setupComponent();
+
+						// Update the dropdown to show the new options
+						this._updateDropdownWithNewOptions();
+
+						// Complete the component setup with the fetched data
+						this._completeRemoteSetup();
 
 						// Add pagination "Load More" button if needed
 						if (this._config.pagination && this._remoteModule.hasMorePages()) {
@@ -156,6 +169,145 @@ export class KTSelect extends KTComponent {
 		options.forEach((option) => option.remove());
 	}
 
+	/**
+	 * Unified method to render options in dropdown - eliminates code duplication
+	 */
+	private _renderOptionsInDropdown(
+		optionsData: KTSelectOptionData[] | HTMLOptionElement[],
+		clearContainer: boolean = true,
+	): void {
+		if (!this._dropdownContentElement) return;
+
+		// Use cached options container for better performance
+		const optionsContainer =
+			this._optionsContainer ||
+			this._dropdownContentElement.querySelector('[data-kt-select-options]');
+		if (!optionsContainer) return;
+
+		// Clear container if requested
+		if (clearContainer) {
+			optionsContainer.innerHTML = '';
+		}
+
+		// Use DocumentFragment for efficient DOM manipulation
+		const fragment = document.createDocumentFragment();
+
+		// Process options data
+		optionsData.forEach((optionData) => {
+			let optionElement: HTMLOptionElement;
+
+			// Handle different input types
+			if (optionData instanceof HTMLOptionElement) {
+				// Skip empty placeholder options
+				if (optionData.value === '' && optionData.textContent.trim() === '') {
+					return;
+				}
+				optionElement = optionData;
+			} else {
+				// Handle KTSelectOptionData objects - cast to ensure type safety
+				const dataItem = optionData as KTSelectOptionData;
+				optionElement = document.createElement('option');
+				optionElement.value = dataItem.id || '';
+				optionElement.textContent = dataItem.title || '';
+
+				if (dataItem.selected) {
+					optionElement.setAttribute('selected', 'selected');
+				}
+				if (dataItem.disabled) {
+					optionElement.setAttribute('disabled', 'disabled');
+				}
+			}
+
+			// Create KTSelectOption instance for proper rendering
+			const selectOption = new KTSelectOption(optionElement, this._config);
+			const renderedOption = selectOption.render();
+
+			// Add to fragment for batch DOM operation
+			fragment.appendChild(renderedOption);
+		});
+
+		// Batch append all options at once
+		optionsContainer.appendChild(fragment);
+
+		// Update options NodeList
+		this._options = this._wrapperElement.querySelectorAll(
+			'[data-kt-select-option]',
+		) as NodeListOf<HTMLElement>;
+
+		if (this._config.debug) {
+			console.log(`Rendered ${optionsData.length} options in dropdown`);
+		}
+	}
+
+	/**
+	 * Update dropdown with new options from the original select element
+	 */
+	private _updateDropdownWithNewOptions() {
+		// Get all options from the original select element
+		const options = Array.from(this._element.querySelectorAll('option'));
+
+		// Use unified renderer
+		this._renderOptionsInDropdown(options, true);
+	}
+
+	/**
+	 * Complete the setup for remote data after HTML structure is created
+	 */
+	private _completeRemoteSetup() {
+		// Initialize options
+		this._preSelectOptions(this._element);
+
+		// Apply disabled state if needed
+		this._applyInitialDisabledState();
+
+		// Initialize search if enabled
+		if (this._config.enableSearch) {
+			this._initializeSearchModule();
+		}
+
+		// Initialize combobox if enabled
+		if (this._config.combobox) {
+			this._comboboxModule = new KTSelectCombobox(this);
+		}
+
+		// Initialize tags if enabled
+		if (this._config.tags) {
+			this._tagsModule = new KTSelectTags(this);
+		}
+
+		// Initialize focus manager after dropdown element is created
+		this._focusManager = new FocusManager(
+			this._dropdownContentElement,
+			'[data-kt-select-option]',
+			this._config,
+		);
+
+		// Initialize dropdown module after all elements are created
+		this._dropdownModule = new KTSelectDropdown(
+			this._wrapperElement,
+			this._displayElement,
+			this._dropdownContentElement,
+			this._config,
+			this, // Pass the KTSelect instance to KTSelectDropdown
+		);
+
+		// Update display and set ARIA attributes
+		this._updateDisplayAndAriaAttributes();
+		this.updateSelectedOptionDisplay();
+		this._setAriaAttributes();
+
+		// Update select all button state
+		this.updateSelectAllButtonState();
+
+		// Focus the first selected option or first option if nothing selected
+		this._focusSelectedOption();
+
+		// Attach event listeners after all modules are initialized
+		this._attachEventListeners();
+
+		this._observeNativeSelect();
+	}
+
 	/**
 	 * Helper to show a dropdown message (error, loading, noResults)
 	 */
@@ -174,19 +326,22 @@ export class KTSelect extends KTComponent {
 
 		switch (type) {
 			case 'error':
-				optionsContainer.appendChild(defaultTemplates.error({
-					...this._config,
-					errorMessage: message,
-				}));
+				optionsContainer.appendChild(
+					defaultTemplates.error({
+						...this._config,
+						errorMessage: message,
+					}),
+				);
 				break;
 			case 'loading':
-				optionsContainer.appendChild(defaultTemplates.loading(
-					this._config,
-					message || 'Loading...',
-				));
+				optionsContainer.appendChild(
+					defaultTemplates.loading(this._config, message || 'Loading...'),
+				);
 				break;
 			case 'empty':
-				optionsContainer.appendChild(defaultTemplates.searchEmpty(this._config));
+				optionsContainer.appendChild(
+					defaultTemplates.searchEmpty(this._config),
+				);
 				break;
 		}
 	}
@@ -436,18 +591,22 @@ export class KTSelect extends KTComponent {
 		// Move classes from original select to wrapper and display elements
 		if (this._element.classList.length > 0) {
 			const originalClasses = Array.from(this._element.classList);
-			const displaySpecificClasses = ['kt-select', 'kt-select-sm', 'kt-select-lg'];
+			const displaySpecificClasses = [
+				'kt-select',
+				'kt-select-sm',
+				'kt-select-lg',
+			];
 
 			const classesForWrapper = originalClasses.filter(
-				(className) => !displaySpecificClasses.includes(className)
+				(className) => !displaySpecificClasses.includes(className),
 			);
 			if (classesForWrapper.length > 0) {
 				wrapperElement.classList.add(...classesForWrapper);
 			}
 
 			// Move display-specific classes to display element
-			const classesForDisplay = originalClasses.filter(
-				(className) => displaySpecificClasses.includes(className)
+			const classesForDisplay = originalClasses.filter((className) =>
+				displaySpecificClasses.includes(className),
 			);
 			if (classesForDisplay.length > 0) {
 				displayElement.classList.add(...classesForDisplay);
@@ -477,7 +636,7 @@ export class KTSelect extends KTComponent {
 		// Create options container using template
 		const optionsContainer = defaultTemplates.options(this._config);
 
-		// Add each option directly to the container
+		// Add each option directly to the container (only if options exist)
 		options.forEach((optionElement) => {
 			// Skip empty placeholder options (only if BOTH value AND text are empty)
 			// This allows options with empty value but visible text to display in dropdown
@@ -513,6 +672,14 @@ export class KTSelect extends KTComponent {
 	private _setupElementReferences() {
 		this._wrapperElement = this._element.nextElementSibling as HTMLElement;
 
+		// Safety check - ensure wrapper element exists
+		if (!this._wrapperElement) {
+			console.error(
+				'KTSelect: Wrapper element not found. HTML structure may not be created properly.',
+			);
+			return;
+		}
+
 		// Get display element
 		this._displayElement = this._wrapperElement.querySelector(
 			`[data-kt-select-display]`,
@@ -524,8 +691,11 @@ export class KTSelect extends KTComponent {
 		) as HTMLElement;
 
 		if (!this._dropdownContentElement) {
-			console.log(this._element)
-			console.error('Dropdown content element not found', this._wrapperElement);
+			console.error(
+				'KTSelect: Dropdown content element not found',
+				this._wrapperElement,
+			);
+			return;
 		}
 
 		// Get search input element - this is used for the search functionality
@@ -542,6 +712,11 @@ export class KTSelect extends KTComponent {
 			'[data-kt-select-select-all]',
 		) as HTMLElement;
 
+		// Cache the options container for performance
+		this._optionsContainer = this._dropdownContentElement.querySelector(
+			'[data-kt-select-options]',
+		) as HTMLElement;
+
 		this._options = this._wrapperElement.querySelectorAll(
 			`[data-kt-select-option]`,
 		) as NodeListOf<HTMLElement>;
@@ -562,7 +737,8 @@ export class KTSelect extends KTComponent {
 		);
 
 		if (this._selectAllButton) {
-			this._selectAllButtonToggle = this._selectAllButton.querySelector('button');
+			this._selectAllButtonToggle =
+				this._selectAllButton.querySelector('button');
 			if (this._selectAllButtonToggle) {
 				this._eventManager.addListener(
 					this._selectAllButtonToggle,
@@ -575,7 +751,10 @@ export class KTSelect extends KTComponent {
 		// 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));
+			this._wrapperElement.addEventListener(
+				'keydown',
+				this._handleKeyboardEvent.bind(this),
+			);
 		}
 	}
 
@@ -666,9 +845,7 @@ export class KTSelect extends KTComponent {
 
 				// Log the extracted values for debugging
 				if (this._config.debug)
-					console.log(
-						`Option: value=${value}, label=${label}`,
-					);
+					console.log(`Option: value=${value}, label=${label}`);
 
 				// Set option attributes
 				optionElement.value = value;
@@ -743,7 +920,8 @@ export class KTSelect extends KTComponent {
 	 */
 	public openDropdown() {
 		if (this._config.disabled) {
-			if (this._config.debug) console.log('openDropdown: select is disabled, not opening');
+			if (this._config.debug)
+				console.log('openDropdown: select is disabled, not opening');
 			return;
 		}
 		if (this._config.debug)
@@ -877,7 +1055,8 @@ export class KTSelect extends KTComponent {
 	private _selectOption(value: string) {
 		// Prevent selection if the option is disabled (in dropdown or original select)
 		if (this._isOptionDisabled(value)) {
-			if (this._config.debug) console.log('_selectOption: Option is disabled, ignoring selection');
+			if (this._config.debug)
+				console.log('_selectOption: Option is disabled, ignoring selection');
 			return;
 		}
 
@@ -945,7 +1124,9 @@ export class KTSelect extends KTComponent {
 		// 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].');
+				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
 		}
@@ -968,7 +1149,9 @@ export class KTSelect extends KTComponent {
 					// Tags are not enabled AND options are selected: render normal text display.
 					let content = '';
 					if (this._config.displayTemplate) {
-						content = this.renderDisplayTemplateForSelected(this.getSelectedOptions());
+						content = this.renderDisplayTemplateForSelected(
+							this.getSelectedOptions(),
+						);
 					} else {
 						content = this.getSelectedOptionsText();
 					}
@@ -982,9 +1165,9 @@ export class KTSelect extends KTComponent {
 	 * 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;
+		const originalOption = Array.from(
+			this._element.querySelectorAll('option'),
+		).find((opt) => opt.value === value) as HTMLOptionElement;
 		return originalOption ? originalOption.disabled : false;
 	}
 
@@ -1011,7 +1194,8 @@ export class KTSelect extends KTComponent {
 			if (!optionValue) return;
 
 			const isSelected = selectedValues.includes(optionValue);
-			const isOriginallyDisabled = this._isOptionOriginallyDisabled(optionValue);
+			const isOriginallyDisabled =
+				this._isOptionOriginallyDisabled(optionValue);
 
 			if (isSelected) {
 				option.classList.add('selected');
@@ -1146,7 +1330,10 @@ export class KTSelect extends KTComponent {
 
 		// 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.');
+			if (this._config.debug)
+				console.log(
+					'Single select mode: clicked already selected option. Closing dropdown.',
+				);
 			this.closeDropdown();
 			return;
 		}
@@ -1303,24 +1490,31 @@ export class KTSelect extends KTComponent {
 	public toggleSelection(value: string): void {
 		// Prevent selection if the option is disabled (in dropdown or original select)
 		if (this._isOptionDisabled(value)) {
-			if (this._config.debug) console.log('toggleSelection: Option is disabled, ignoring selection');
+			if (this._config.debug)
+				console.log('toggleSelection: Option is disabled, ignoring selection');
 			return;
 		}
 
 		// 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}`);
+			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) {
 			if (this._config.debug)
-				console.log('Early return from toggleSelection - already selected in single select mode');
+				console.log(
+					'Early return from toggleSelection - already selected in single select mode',
+				);
 			return;
 		}
 
 		if (this._config.debug)
-			console.log(`Toggling selection for option: ${value}, currently selected: ${isSelected}`);
+			console.log(
+				`Toggling selection for option: ${value}, currently selected: ${isSelected}`,
+			);
 
 		// Ensure any search input is cleared when selection changes
 		if (this._searchModule) {
@@ -1357,11 +1551,15 @@ export class KTSelect extends KTComponent {
 		// For multiple select mode, keep the dropdown open to allow multiple selections
 		if (!this._config.multiple) {
 			if (this._config.debug)
-				console.log('About to call closeDropdown() for single select mode - always close after selection');
+				console.log(
+					'About to call closeDropdown() for single select mode - always close after selection',
+				);
 			this.closeDropdown();
 		} else {
 			if (this._config.debug)
-				console.log('Multiple select mode - keeping dropdown open for additional selections');
+				console.log(
+					'Multiple select mode - keeping dropdown open for additional selections',
+				);
 			// Don't close dropdown in multiple select mode to allow multiple selections
 			this.updateSelectAllButtonState();
 		}
@@ -1467,6 +1665,8 @@ export class KTSelect extends KTComponent {
 
 		// Check if the query is long enough
 		if (query.length < (this._config.searchMinLength || 0)) {
+			// Restore original options if query is too short
+			this._restoreOriginalOptions();
 			return;
 		}
 
@@ -1507,7 +1707,7 @@ export class KTSelect extends KTComponent {
 					console.error('Error fetching search results:', error);
 					this._renderSearchErrorState(
 						this._remoteModule.getErrorMessage() ||
-						'Failed to load search results',
+							'Failed to load search results',
 					);
 				});
 		}, this._config.searchDebounce || 300);
@@ -1540,6 +1740,42 @@ export class KTSelect extends KTComponent {
 	 */
 	private _renderSearchErrorState(message: string) {
 		this._showDropdownMessage('error', message);
+
+		// Restore original options after error with a delay
+		setTimeout(() => {
+			this._restoreOriginalOptions();
+		}, 2000);
+	}
+
+	/**
+	 * Restore original options when search is cleared
+	 */
+	private _restoreOriginalOptions() {
+		if (!this._dropdownContentElement || !this._originalOptionsHtml) return;
+
+		// Use cached options container for better performance
+		const optionsContainer =
+			this._optionsContainer ||
+			this._dropdownContentElement.querySelector('[data-kt-select-options]');
+		if (!optionsContainer) return;
+
+		// Restore original options
+		optionsContainer.innerHTML = this._originalOptionsHtml;
+
+		// Update options NodeList
+		this._options = this._wrapperElement.querySelectorAll(
+			'[data-kt-select-option]',
+		) as NodeListOf<HTMLElement>;
+
+		// Refresh search module
+		if (this._searchModule) {
+			this._searchModule.refreshAfterSearch();
+		}
+		this.updateSelectAllButtonState();
+
+		if (this._config.debug) {
+			console.log('Restored original options after search clear');
+		}
 	}
 
 	/**
@@ -1549,40 +1785,27 @@ export class KTSelect extends KTComponent {
 	private _updateSearchResults(items: KTSelectOptionData[]) {
 		if (!this._dropdownContentElement) return;
 
-		const optionsContainer = this._dropdownContentElement.querySelector(
-			'[data-kt-select-options]',
-		);
+		// Use cached options container for better performance
+		const optionsContainer =
+			this._optionsContainer ||
+			this._dropdownContentElement.querySelector('[data-kt-select-options]');
 		if (!optionsContainer) return;
 
-		// Clear current options
-		optionsContainer.innerHTML = '';
-
+		// Handle empty results
 		if (items.length === 0) {
-			// Show no results message using template for consistency and customization
+			optionsContainer.innerHTML = '';
 			const noResultsElement = defaultTemplates.searchEmpty(this._config);
 			optionsContainer.appendChild(noResultsElement);
 			return;
 		}
 
-		// Process each item individually to create options
-		items.forEach((item) => {
-			// Create option for the original select
-			const selectOption = document.createElement('option');
-			selectOption.value = item.id;
-
-			// Add to dropdown container
-			optionsContainer.appendChild(selectOption);
-		});
+		// Use unified renderer for search results
+		this._renderOptionsInDropdown(items, true);
 
 		// Add pagination "Load More" button if needed
 		if (this._config.pagination && this._remoteModule.hasMorePages()) {
 			this._addLoadMoreButton();
 		}
-
-		// Update options NodeList
-		this._options = this._wrapperElement.querySelectorAll(
-			`[data-kt-select-option]`,
-		) as NodeListOf<HTMLElement>;
 	}
 
 	/**
@@ -1595,10 +1818,14 @@ export class KTSelect extends KTComponent {
 	public getSelectedOptionsText(): string {
 		const selectedValues = this.getSelectedOptions();
 		const displaySeparator = this._config.displaySeparator || ', ';
-		const texts = selectedValues.map(value => {
-			const option = Array.from(this._options).find(opt => opt.getAttribute('data-value') === value);
-			return option?.getAttribute('data-text') || '';
-		}).filter(Boolean);
+		const texts = selectedValues
+			.map((value) => {
+				const option = Array.from(this._options).find(
+					(opt) => opt.getAttribute('data-value') === value,
+				);
+				return option?.getAttribute('data-text') || '';
+			})
+			.filter(Boolean);
 		return texts.join(displaySeparator);
 	}
 
@@ -1607,12 +1834,15 @@ export class KTSelect extends KTComponent {
 	 */
 	private _isOptionDisabled(value: string): boolean {
 		const dropdownOption = Array.from(this._options).find(
-			(opt) => opt.getAttribute('data-value') === value
+			(opt) => opt.getAttribute('data-value') === value,
 		);
-		const isDropdownDisabled = dropdownOption && (dropdownOption.classList.contains('disabled') || dropdownOption.getAttribute('aria-disabled') === 'true');
-		const selectOption = Array.from(this._element.querySelectorAll('option')).find(
-			(opt) => opt.value === value
-		) as HTMLOptionElement;
+		const isDropdownDisabled =
+			dropdownOption &&
+			(dropdownOption.classList.contains('disabled') ||
+				dropdownOption.getAttribute('aria-disabled') === 'true');
+		const selectOption = Array.from(
+			this._element.querySelectorAll('option'),
+		).find((opt) => opt.value === value) as HTMLOptionElement;
 		const isNativeDisabled = selectOption && selectOption.disabled;
 		return Boolean(isDropdownDisabled || isNativeDisabled);
 	}
@@ -1636,9 +1866,16 @@ export class KTSelect extends KTComponent {
 		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 (
+				event.key !== 'ArrowDown' &&
+				event.key !== 'ArrowUp' &&
+				event.key !== 'Escape' &&
+				event.key !== 'Enter' &&
+				event.key !== 'Tab' &&
+				event.key !== 'Home' &&
+				event.key !== 'End' &&
+				event.key !== ' '
+			) {
 				// 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.
@@ -1653,11 +1890,16 @@ export class KTSelect extends KTComponent {
 		if (event.altKey || event.ctrlKey || event.metaKey) return;
 
 		// 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) {
+		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);
+				focusManager.focusByString(str);
 			} 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.
@@ -1698,8 +1940,15 @@ export class KTSelect extends KTComponent {
 					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.');
+						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;
@@ -1737,30 +1986,39 @@ export class KTSelect extends KTComponent {
 	}
 
 	public renderDisplayTemplateForSelected(selectedValues: string[]): string {
-		const optionsConfig = this._config.optionsConfig as any || {};
+		const optionsConfig = (this._config.optionsConfig as any) || {};
 		const displaySeparator = this._config.displaySeparator || ', ';
-		const contentArray = Array.from(new Set(
-			selectedValues.map(value => {
-				const option = Array.from(this._options).find(opt => opt.getAttribute('data-value') === value);
-				if (!option) return '';
-
-				let displayTemplate = this._config.displayTemplate;
-				const text = option.getAttribute('data-text') || '';
-
-				// Replace all {{varname}} in option.innerHTML with values from _config
-				Object.entries(optionsConfig[value] || {}).forEach(([key, val]) => {
-					if (["string", "number", "boolean"].includes(typeof val)) {
-						displayTemplate = displayTemplate.replace(new RegExp(`{{${key}}}`, 'g'), String(val));
-					}
-				});
+		const contentArray = Array.from(
+			new Set(
+				selectedValues
+					.map((value) => {
+						const option = Array.from(this._options).find(
+							(opt) => opt.getAttribute('data-value') === value,
+						);
+						if (!option) return '';
+
+						let displayTemplate = this._config.displayTemplate;
+						const text = option.getAttribute('data-text') || '';
+
+						// Replace all {{varname}} in option.innerHTML with values from _config
+						Object.entries(optionsConfig[value] || {}).forEach(([key, val]) => {
+							if (['string', 'number', 'boolean'].includes(typeof val)) {
+								displayTemplate = displayTemplate.replace(
+									new RegExp(`{{${key}}}`, 'g'),
+									String(val),
+								);
+							}
+						});
 
-				return renderTemplateString(displayTemplate, {
-					selectedCount: selectedValues.length || 0,
-					selectedTexts: this.getSelectedOptionsText() || '',
-					text,
-				});
-			}).filter(Boolean)
-		));
+						return renderTemplateString(displayTemplate, {
+							selectedCount: selectedValues.length || 0,
+							selectedTexts: this.getSelectedOptionsText() || '',
+							text,
+						});
+					})
+					.filter(Boolean),
+			),
+		);
 		return contentArray.join(displaySeparator);
 	}
 
@@ -1778,7 +2036,10 @@ export class KTSelect extends KTComponent {
 				if (mutation.type === 'childList') {
 					// Option(s) added or removed
 					needsRebuild = true;
-				} else if (mutation.type === 'attributes' && mutation.target instanceof HTMLOptionElement) {
+				} else if (
+					mutation.type === 'attributes' &&
+					mutation.target instanceof HTMLOptionElement
+				) {
 					if (mutation.attributeName === 'selected') {
 						needsSelectionSync = true;
 					}
@@ -1805,7 +2066,9 @@ export class KTSelect extends KTComponent {
 	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]');
+			const optionsContainer = this._dropdownContentElement.querySelector(
+				'[data-kt-select-options]',
+			);
 			if (optionsContainer) {
 				optionsContainer.innerHTML = '';
 				const options = Array.from(this._element.querySelectorAll('option'));
@@ -1821,7 +2084,9 @@ export class KTSelect extends KTComponent {
 					optionsContainer.appendChild(renderedOption);
 				});
 				// Update internal references
-				this._options = this._wrapperElement.querySelectorAll('[data-kt-select-option]') as NodeListOf<HTMLElement>;
+				this._options = this._wrapperElement.querySelectorAll(
+					'[data-kt-select-option]',
+				) as NodeListOf<HTMLElement>;
 			}
 		}
 		// Sync selection after rebuilding
@@ -1832,8 +2097,12 @@ export class KTSelect extends KTComponent {
 
 	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] || '');
+		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();
 		this.updateSelectAllButtonState();