@keenthemes/ktui 1.0.24 → 1.0.26

package/src/components/select/select.ts

@@ -60,6 +60,7 @@ export class KTSelect extends KTComponent {
 	private _eventManager: EventManager;
 	private _typeToSearchBuffer: TypeToSearchBuffer = new TypeToSearchBuffer();
 	private _mutationObserver: MutationObserver | null = null;
+	private _preSelectedValues: string[] = [];
 
 	/**
 	 * Constructor: Initializes the select component
@@ -200,6 +201,21 @@ export class KTSelect extends KTComponent {
 	 * Clear existing options from the select element
 	 */
 	private _clearExistingOptions() {
+		// Capture pre-selected values before clearing (for remote data)
+		const selectedOptions = Array.from(
+			this._element.querySelectorAll('option[selected]:not([value=""])'),
+		) as HTMLOptionElement[];
+
+		if (selectedOptions.length > 0) {
+			this._preSelectedValues = selectedOptions.map((opt) => opt.value);
+			if (this._config.debug) {
+				console.log(
+					'Captured pre-selected values before clearing:',
+					this._preSelectedValues,
+				);
+			}
+		}
+
 		// Keep only the empty/placeholder option and remove the rest
 		const options = Array.from(
 			this._element.querySelectorAll('option:not([value=""])'),
@@ -268,7 +284,7 @@ export class KTSelect extends KTComponent {
 		optionsContainer.appendChild(fragment);
 
 		// Update options NodeList
-		this._options = this._wrapperElement.querySelectorAll(
+		this._options = this._dropdownContentElement.querySelectorAll(
 			'[data-kt-select-option]',
 		) as NodeListOf<HTMLElement>;
 
@@ -295,6 +311,67 @@ export class KTSelect extends KTComponent {
 		// Initialize options
 		this._preSelectOptions(this._element);
 
+		// Apply pre-selected values captured before remote data was loaded
+		if (this._preSelectedValues.length > 0) {
+			if (this._config.debug) {
+				console.log(
+					'Applying pre-selected values after remote data loaded:',
+					this._preSelectedValues,
+				);
+			}
+
+			// Get all available option values from the loaded remote data
+			const availableValues = Array.from(
+				this._element.querySelectorAll('option'),
+			).map((opt) => (opt as HTMLOptionElement).value);
+
+			// Filter pre-selected values to only those that exist in remote data
+			const validPreSelectedValues = this._preSelectedValues.filter((value) =>
+				availableValues.includes(value),
+			);
+
+			if (validPreSelectedValues.length > 0) {
+				// For single-select mode, only use the first value
+				const valuesToSelect = this._config.multiple
+					? validPreSelectedValues
+					: [validPreSelectedValues[0]];
+
+				if (this._config.debug) {
+					console.log('Selecting matched values:', valuesToSelect);
+				}
+
+				// Get any existing selections from _preSelectOptions (e.g., data-kt-select-pre-selected)
+				const existingSelections = this._state.getSelectedOptions();
+
+				// Merge existing selections with native pre-selected values (no duplicates)
+				const allSelections = this._config.multiple
+					? Array.from(new Set([...existingSelections, ...valuesToSelect]))
+					: valuesToSelect;
+
+				// Set all selections at once to avoid toggling issues
+				this._state.setSelectedOptions(allSelections);
+
+				// Update the native select element to match
+				Array.from(this._element.querySelectorAll('option')).forEach((opt) => {
+					(opt as HTMLOptionElement).selected = allSelections.includes(
+						opt.value,
+					);
+				});
+
+				// Update the visual display
+				this.updateSelectedOptionDisplay();
+				this._updateSelectedOptionClass();
+			} else if (this._config.debug) {
+				console.log(
+					'None of the pre-selected values matched remote data:',
+					this._preSelectedValues,
+				);
+			}
+
+			// Clear the pre-selected values array after processing
+			this._preSelectedValues = [];
+		}
+
 		// Apply disabled state if needed
 		this._applyInitialDisabledState();
 
@@ -536,7 +613,7 @@ export class KTSelect extends KTComponent {
 		});
 
 		// Update options NodeList to include the new options
-		this._options = this._wrapperElement.querySelectorAll(
+		this._options = this._dropdownContentElement.querySelectorAll(
 			`[data-kt-select-option]`,
 		) as NodeListOf<HTMLElement>;
 
@@ -755,7 +832,7 @@ export class KTSelect extends KTComponent {
 			'[data-kt-select-options]',
 		) as HTMLElement;
 
-		this._options = this._wrapperElement.querySelectorAll(
+		this._options = this._dropdownContentElement.querySelectorAll(
 			`[data-kt-select-option]`,
 		) as NodeListOf<HTMLElement>;
 	}
@@ -1146,6 +1223,24 @@ export class KTSelect extends KTComponent {
 		});
 	}
 
+	/**
+	 * Sync native select value attribute for FormData support
+	 */
+	private _syncNativeSelectValue(): void {
+		const selectedOptions = this.getSelectedOptions();
+
+		if (this._config.multiple) {
+			// For multiple select, the selected options are marked via option.selected
+			// The native select's value property will return the first selected option's value
+			// FormData will include all selected values automatically
+		} else {
+			// For single select, set the value attribute explicitly
+			const selectedValue =
+				selectedOptions.length > 0 ? selectedOptions[0] : '';
+			(this._element as HTMLSelectElement).value = selectedValue;
+		}
+	}
+
 	/**
 	 * Update selected option display value
 	 */
@@ -1154,6 +1249,9 @@ export class KTSelect extends KTComponent {
 		const tagsEnabled = this._config.tags && this._tagsModule;
 		const valueDisplayEl = this.getValueDisplayElement();
 
+		// Sync native select value for FormData support
+		this._syncNativeSelectValue();
+
 		if (tagsEnabled) {
 			// Tags module will render tags if selectedOptions > 0, or clear them if selectedOptions === 0.
 			this._tagsModule.updateTagsDisplay(selectedOptions);
@@ -1215,7 +1313,7 @@ export class KTSelect extends KTComponent {
 	 * Update CSS classes for selected options
 	 */
 	private _updateSelectedOptionClass(): void {
-		const allOptions = this._wrapperElement.querySelectorAll(
+		const allOptions = this._dropdownContentElement.querySelectorAll(
 			`[data-kt-select-option]`,
 		);
 		const selectedValues = this._state.getSelectedOptions();
@@ -1272,6 +1370,9 @@ export class KTSelect extends KTComponent {
 			(opt as HTMLOptionElement).selected = false;
 		});
 
+		// Clear native select value
+		(this._element as HTMLSelectElement).value = '';
+
 		this.updateSelectedOptionDisplay();
 		this._updateSelectedOptionClass();
 
@@ -1476,7 +1577,7 @@ export class KTSelect extends KTComponent {
 	public showAllOptions() {
 		// Get all options in the dropdown
 		const options = Array.from(
-			this._wrapperElement.querySelectorAll(`[data-kt-select-option]`),
+			this._dropdownContentElement.querySelectorAll(`[data-kt-select-option]`),
 		);
 
 		// Show all options by removing the hidden class and any inline styles
@@ -1665,10 +1766,248 @@ export class KTSelect extends KTComponent {
 
 	/**
 	 * ========================================================================
-	 * STATIC METHODS
+	 * DYNAMIC CONTROL METHODS
 	 * ========================================================================
 	 */
 
+	/**
+	 * Programmatically enable the select component
+	 * @public
+	 */
+	public enable(): void {
+		// Update config state
+		this._config.disabled = false;
+
+		// Remove disabled attribute from native select
+		this._element.removeAttribute('disabled');
+		this._element.classList.remove('disabled');
+
+		// Remove disabled state from wrapper and display elements
+		if (this._wrapperElement) {
+			this._wrapperElement.classList.remove('disabled');
+		}
+
+		if (this._displayElement) {
+			this._displayElement.removeAttribute('aria-disabled');
+		}
+
+		// Dispatch enabled event
+		this._dispatchEvent('enabled');
+		this._fireEvent('enabled');
+	}
+
+	/**
+	 * Programmatically disable the select component
+	 * @public
+	 */
+	public disable(): void {
+		// Update config state
+		this._config.disabled = true;
+
+		// Close dropdown if currently open
+		if (this._dropdownIsOpen) {
+			this.closeDropdown();
+		}
+
+		// Add disabled attribute to native select
+		this._element.setAttribute('disabled', 'disabled');
+		this._element.classList.add('disabled');
+
+		// Add disabled state to wrapper and display elements
+		if (this._wrapperElement) {
+			this._wrapperElement.classList.add('disabled');
+		}
+
+		if (this._displayElement) {
+			this._displayElement.setAttribute('aria-disabled', 'true');
+		}
+
+		// Dispatch disabled event
+		this._dispatchEvent('disabled');
+		this._fireEvent('disabled');
+	}
+
+	/**
+	 * Update the dropdown to sync with native select element changes
+	 * For remote selects, refetches data from the server
+	 * Optionally accepts new options to replace existing ones (static selects only)
+	 * @param newOptions Optional array of new options [{value, text}, ...]
+	 * @public
+	 */
+	public update(newOptions?: Array<{ value: string; text: string }>): void {
+		// For remote selects, refetch data
+		if (this._config.remote && this._remoteModule) {
+			this._remoteModule
+				.fetchData()
+				.then((items) => {
+					// Clear existing options
+					this._clearExistingOptions();
+
+					// Add new options from remote data
+					items.forEach((item) => {
+						const option = document.createElement('option');
+						option.value = item.id;
+						option.textContent = item.title;
+						if (item.disabled) option.disabled = true;
+						this._element.appendChild(option);
+					});
+
+					// Rebuild dropdown
+					this._rebuildOptionsFromNative();
+
+					// Dispatch updated event
+					this._dispatchEvent('updated');
+					this._fireEvent('updated');
+				})
+				.catch((error) => {
+					console.error('Error updating remote data:', error);
+					this._dispatchEvent('updateError');
+					this._fireEvent('updateError');
+				});
+		} else {
+			// For static selects, handle new options
+			if (newOptions) {
+				// Clear existing options except placeholder
+				this._clearExistingOptions();
+
+				// Add new options to native select
+				newOptions.forEach((opt) => {
+					const option = document.createElement('option');
+					option.value = opt.value;
+					option.textContent = opt.text;
+					this._element.appendChild(option);
+				});
+			}
+
+			// Rebuild dropdown from native select
+			this._rebuildOptionsFromNative();
+
+			// Dispatch updated event
+			this._dispatchEvent('updated');
+			this._fireEvent('updated');
+		}
+	}
+
+	/**
+	 * Reload remote data and rebuild the dropdown
+	 * Only works with remote data enabled
+	 * @returns Promise that resolves when reload completes
+	 * @public
+	 */
+	public reload(): Promise<void> {
+		// Guard clause: only works with remote data
+		if (!this._config.remote || !this._remoteModule) {
+			console.warn('reload() only works with remote data enabled');
+			return Promise.resolve();
+		}
+
+		// Dispatch reload start event
+		this._dispatchEvent('reloadStart');
+		this._fireEvent('reloadStart');
+
+		// Fetch fresh remote data
+		return this._remoteModule
+			.fetchData()
+			.then((items) => {
+				// Clear existing options
+				this._clearExistingOptions();
+
+				// Update state with new items
+				return this._state.setItems(items).then(() => {
+					// Generate new options HTML
+					this._generateOptionsHtml(this._element);
+
+					// Update the dropdown
+					this._updateDropdownWithNewOptions();
+
+					// Sync selection state from native select
+					this._syncSelectionFromNative();
+
+					// Update visual display
+					this.updateSelectedOptionDisplay();
+					this._updateSelectedOptionClass();
+
+					// Update select all button state if applicable
+					if (this._config.multiple && this._config.enableSelectAll) {
+						this.updateSelectAllButtonState();
+					}
+
+					// Dispatch reload complete event
+					this._dispatchEvent('reloadComplete');
+					this._fireEvent('reloadComplete');
+				});
+			})
+			.catch((error) => {
+				console.error('Error reloading remote data:', error);
+
+				// Dispatch reload error event with error details
+				this._dispatchEvent('reloadError', { error });
+				this._fireEvent('reloadError', { error });
+
+				// Re-throw error so caller can handle it
+				throw error;
+			});
+	}
+
+	/**
+	 * Refresh the visual display and state without rebuilding options
+	 * For remote selects, refetches data from the server
+	 * @public
+	 */
+	public refresh(): void {
+		// For remote selects, refetch data
+		if (this._config.remote && this._remoteModule) {
+			this._remoteModule
+				.fetchData()
+				.then((items) => {
+					// Clear existing options
+					this._clearExistingOptions();
+
+					// Add new options
+					items.forEach((item) => {
+						const option = document.createElement('option');
+						option.value = item.id;
+						option.textContent = item.title;
+						if (item.disabled) option.disabled = true;
+						this._element.appendChild(option);
+					});
+
+					// Rebuild dropdown
+					this._rebuildOptionsFromNative();
+
+					// Sync selection state
+					this._syncSelectionFromNative();
+
+					// Reapply ARIA attributes
+					this._setAriaAttributes();
+
+					// Dispatch refreshed event
+					this._dispatchEvent('refreshed');
+					this._fireEvent('refreshed');
+				})
+				.catch((error) => {
+					console.error('Error refreshing remote data:', error);
+					this._dispatchEvent('refreshError');
+					this._fireEvent('refreshError');
+				});
+		} else {
+			// For static selects, just sync visual state
+			this._syncSelectionFromNative();
+
+			// Reapply ARIA attributes
+			this._setAriaAttributes();
+
+			// Dispatch refreshed event
+			this._dispatchEvent('refreshed');
+			this._fireEvent('refreshed');
+		}
+	}
+
+	/**
+	 * ========================================================================
+	 * STATIC METHODS
+	 * ========================================================================
+	 */
 
 	/**
 	 * Create instances of KTSelect for all matching elements
@@ -1834,7 +2173,7 @@ export class KTSelect extends KTComponent {
 		optionsContainer.innerHTML = this._originalOptionsHtml;
 
 		// Update options NodeList
-		this._options = this._wrapperElement.querySelectorAll(
+		this._options = this._dropdownContentElement.querySelectorAll(
 			'[data-kt-select-option]',
 		) as NodeListOf<HTMLElement>;
 
@@ -1907,7 +2246,9 @@ export class KTSelect extends KTComponent {
 		});
 
 		if (this._config.debug) {
-			console.log(`Updated original select with ${items.length} search results`);
+			console.log(
+				`Updated original select with ${items.length} search results`,
+			);
 		}
 	}
 
@@ -2187,7 +2528,7 @@ export class KTSelect extends KTComponent {
 					optionsContainer.appendChild(renderedOption);
 				});
 				// Update internal references
-				this._options = this._wrapperElement.querySelectorAll(
+				this._options = this._dropdownContentElement.querySelectorAll(
 					'[data-kt-select-option]',
 				) as NodeListOf<HTMLElement>;
 			}

package/src/components/select/templates.ts

@@ -393,7 +393,8 @@ export const defaultTemplates: KTSelectTemplateInterface = {
 		config: KTSelectConfigInterface,
 	): HTMLElement => {
 		let template = getTemplateStrings(config).tag;
-		let preparedContent = option.textContent || option.innerText || option.value || ''; // Default content is the option's text
+		let preparedContent =
+			option.textContent || option.innerText || option.value || ''; // Default content is the option's text
 
 		if (config.tagTemplate) {
 			let tagTemplateString = config.tagTemplate;