@keenthemes/ktui 1.0.19 → 1.0.21

package/src/components/select/combobox.ts

@@ -26,9 +26,15 @@ export class KTSelectCombobox {
 
 		const displayElement = select.getDisplayElement(); // KTSelect's main display element for combobox
 
-		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]');
+		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]',
+		);
 
 		this._boundInputHandler = this._handleComboboxInput.bind(this);
 		this._boundClearHandler = this._handleClearButtonClick.bind(this);
@@ -42,7 +48,7 @@ export class KTSelectCombobox {
 				this.updateDisplay(this._select.getSelectedOptions());
 			} else {
 				// For tags or displayTemplate, the input should be clear for typing.
-			this._searchInputElement.value = '';
+				this._searchInputElement.value = '';
 			}
 			this._toggleClearButtonVisibility(this._searchInputElement.value);
 			// this._select.showAllOptions(); // showAllOptions might be too broad, filtering is managed by typing.
@@ -56,11 +62,18 @@ export class KTSelectCombobox {
 	 */
 	private _attachEventListeners(): void {
 		this._removeEventListeners();
-		if (this._searchInputElement) { // Ensure element exists
-			this._searchInputElement.addEventListener('input', this._boundInputHandler);
+		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,
+			);
 		}
 	}
 
@@ -69,10 +82,16 @@ 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,
+			);
 		}
 	}
 
@@ -85,7 +104,8 @@ export class KTSelectCombobox {
 
 		this._toggleClearButtonVisibility(query);
 
-		if (!(this._select as any).isDropdownOpen()) { // Use public getter
+		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
@@ -127,7 +147,11 @@ export class KTSelectCombobox {
 		if (!this._clearButtonElement) return;
 		const hasSelectedItems = this._select.getSelectedOptions().length > 0;
 
-		if (inputValue.length > 0 || (hasSelectedItems && (this._config.multiple || this._config.displayTemplate))) {
+		if (
+			inputValue.length > 0 ||
+			(hasSelectedItems &&
+				(this._config.multiple || this._config.displayTemplate))
+		) {
 			this._clearButtonElement.classList.remove('hidden');
 		} else {
 			this._clearButtonElement.classList.add('hidden');
@@ -138,7 +162,9 @@ export class KTSelectCombobox {
 	 * Filter options for combobox based on input query
 	 */
 	private _filterOptionsForCombobox(query: string): void {
-		const options = Array.from(this._select.getOptionsElement()) as HTMLElement[];
+		const options = Array.from(
+			this._select.getOptionsElement(),
+		) as HTMLElement[];
 		const config = this._select.getConfig();
 		const dropdownElement = this._select.getDropdownElement();
 		filterOptions(options, query, config, dropdownElement);
@@ -160,41 +186,65 @@ export class KTSelectCombobox {
 			this._valuesContainerElement.innerHTML = '';
 		}
 
-		if (this._config.tags && this._valuesContainerElement) { // Combobox + Tags
-			selectedOptions.forEach(value => {
+		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;
+				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.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)
+			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._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
+			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 || '' : '';
+			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)
+		} else {
+			// No selection or not fitting above categories (e.g. single select, no items)
 			this._searchInputElement.value = '';
-			this._searchInputElement.placeholder = this._config.placeholder || 'Select...';
+			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

@@ -57,6 +57,7 @@ export const DefaultConfig: KTSelectConfigInterface = {
 	// Multi-Select Display
 	selectAllText: 'Select all', // Text for the "Select All" option (if implemented)
 	clearAllText: 'Clear all', // Text for the "Clear All" option (if implemented)
+	enableSelectAll: false, // Enable/disable "Select All" button for multi-select
 	showSelectedCount: true, // Show the number of selected options in multi-select mode
 	renderSelected: null, // Custom function to render the selected value(s) in the display area
 
@@ -105,6 +106,7 @@ export interface KTSelectConfigInterface {
 	// Multi-Select Display
 	selectAllText?: string;
 	clearAllText?: string;
+	enableSelectAll?: boolean;
 	showSelectedCount?: boolean;
 	renderSelected?: (selectedOptions: any[]) => string; // Assuming any[] for now, adjust based on your option data structure
 

package/src/components/select/dropdown.ts

@@ -106,9 +106,7 @@ export class KTSelectDropdown extends KTComponent {
 
 		if (this._config.disabled) {
 			if (this._config.debug)
-				console.log(
-					'KTSelectDropdown._handleToggleClick: select is disabled',
-				);
+				console.log('KTSelectDropdown._handleToggleClick: select is disabled');
 			return;
 		}
 
@@ -251,9 +249,7 @@ export class KTSelectDropdown extends KTComponent {
 	public open(): void {
 		if (this._config.disabled) {
 			if (this._config.debug)
-				console.log(
-					'KTSelectDropdown.open: select is disabled, not opening',
-				);
+				console.log('KTSelectDropdown.open: select is disabled, not opening');
 			return;
 		}
 		if (this._isOpen || this._isTransitioning) return;
@@ -279,17 +275,26 @@ export class KTSelectDropdown extends KTComponent {
 		}
 
 		// Consider the dropdown's current z-index if it's already set and higher
-		const currentDropdownZIndexStr = KTDom.getCssProp(this._dropdownElement, 'z-index');
+		const currentDropdownZIndexStr = KTDom.getCssProp(
+			this._dropdownElement,
+			'z-index',
+		);
 		if (currentDropdownZIndexStr && currentDropdownZIndexStr !== 'auto') {
 			const currentDropdownZIndex = parseInt(currentDropdownZIndexStr);
-			if (!isNaN(currentDropdownZIndex) && currentDropdownZIndex > (zIndexToApply || 0)) {
+			if (
+				!isNaN(currentDropdownZIndex) &&
+				currentDropdownZIndex > (zIndexToApply || 0)
+			) {
 				zIndexToApply = currentDropdownZIndex;
 			}
 		}
 
 		// Ensure dropdown is above elements within its original toggle's parent context
 		const toggleParentContextZindex = KTDom.getHighestZindex(this._element); // _element is the select wrapper
-		if (toggleParentContextZindex !== null && toggleParentContextZindex >= (zIndexToApply || 0)) {
+		if (
+			toggleParentContextZindex !== null &&
+			toggleParentContextZindex >= (zIndexToApply || 0)
+		) {
 			zIndexToApply = toggleParentContextZindex + 1;
 		}
 
@@ -379,7 +384,9 @@ export class KTSelectDropdown extends KTComponent {
 
 		KTDom.transitionEnd(this._dropdownElement, completeTransition);
 
-		if (KTDom.getCssProp(this._dropdownElement, 'transition-duration') === '0s') {
+		if (
+			KTDom.getCssProp(this._dropdownElement, 'transition-duration') === '0s'
+		) {
 			completeTransition();
 		}
 	}
@@ -422,7 +429,9 @@ export class KTSelectDropdown extends KTComponent {
 	private _resolveDropdownContainer(): HTMLElement | null {
 		const containerSelector = this._config.dropdownContainer;
 		if (containerSelector && containerSelector !== 'body') {
-			const containerElement = document.querySelector(containerSelector) as HTMLElement | null;
+			const containerElement = document.querySelector(
+				containerSelector,
+			) as HTMLElement | null;
 			if (!containerElement && this._config.debug) {
 				console.warn(
 					`KTSelectDropdown: dropdownContainer selector "${containerSelector}" not found. Dropdown will remain in its default position.`,

package/src/components/select/index.ts

@@ -9,5 +9,10 @@ export { KTSelectCombobox } from './combobox';
 export { KTSelectSearch } from './search';
 export { KTSelectTags } from './tags';
 export { KTSelectDropdown } from './dropdown';
-export { filterOptions, FocusManager, EventManager, TypeToSearchBuffer } from './utils';
+export {
+	filterOptions,
+	FocusManager,
+	EventManager,
+	TypeToSearchBuffer,
+} from './utils';
 export { KTSelectConfigInterface, KTSelectOption } from './config';

package/src/components/select/option.ts

@@ -4,9 +4,7 @@
  */
 
 import KTComponent from '../component';
-import {
-	KTSelectConfigInterface,
-} from './config';
+import { KTSelectConfigInterface } from './config';
 import { defaultTemplates } from './templates';
 
 export class KTSelectOption extends KTComponent {
@@ -15,7 +13,7 @@ export class KTSelectOption extends KTComponent {
 	protected override readonly _config: KTSelectConfigInterface; // Holds option-specific data from data-kt-*
 	private _globalConfig: KTSelectConfigInterface; // Main select's config
 
-	constructor(element: HTMLElement, config?: KTSelectConfigInterface,) {
+	constructor(element: HTMLElement, config?: KTSelectConfigInterface) {
 		super();
 
 		// Always initialize a new option instance
@@ -30,13 +28,16 @@ export class KTSelectOption extends KTComponent {
 		// Ensure optionsConfig is initialized
 		if (this._globalConfig) {
 			this._globalConfig.optionsConfig = this._globalConfig.optionsConfig || {};
-			this._globalConfig.optionsConfig[(element as HTMLInputElement).value] = this._config;
+			this._globalConfig.optionsConfig[(element as HTMLInputElement).value] =
+				this._config;
 			// console.log('[KTSelectOption] Populating _globalConfig.optionsConfig for value', (element as HTMLInputElement).value, 'with:', JSON.parse(JSON.stringify(this._config)));
 			// console.log('[KTSelectOption] _globalConfig.optionsConfig is now:', JSON.parse(JSON.stringify(this._globalConfig.optionsConfig)));
 		} else {
 			// Handle case where _globalConfig might be undefined, though constructor expects it.
 			// This might indicate a need to ensure config is always passed or has a default.
-			console.warn('KTSelectOption: _globalConfig is undefined during constructor.');
+			console.warn(
+				'KTSelectOption: _globalConfig is undefined during constructor.',
+			);
 		}
 
 		// Don't store in KTData to avoid Singleton pattern issues

package/src/components/select/remote.ts

@@ -261,16 +261,13 @@ export class KTSelectRemote {
 		const labelField = this._config.dataFieldText || 'title';
 
 		if (this._config.debug)
-			console.log(
-				`Mapping fields: value=${valueField}, label=${labelField}`,
-			);
+			console.log(`Mapping fields: value=${valueField}, label=${labelField}`);
 		if (this._config.debug)
 			console.log('Item data:', JSON.stringify(item).substring(0, 200) + '...'); // Trimmed for readability
 
-		// Extract values using dot notation if needed
+		// Extract values using improved getValue function
 		const getValue = (obj: any, path: string): any => {
-			if (!path) return null;
-			if (!obj) return null;
+			if (!path || !obj) return null;
 
 			try {
 				// Handle dot notation to access nested properties
@@ -296,7 +293,7 @@ export class KTSelectRemote {
 								? typeof result === 'object'
 									? JSON.stringify(result).substring(0, 50)
 									: String(result).substring(0, 50)
-							: 'null'
+								: 'null'
 						}`,
 					);
 
@@ -307,64 +304,66 @@ export class KTSelectRemote {
 			}
 		};
 
-		// Try to get a usable ID, with fallbacks
+		// Get ID and ensure it's a string
 		let id = getValue(item, valueField);
-
-		// Ensure id is always a proper string
 		if (id === null || id === undefined) {
-			// If no ID found, check for id.value or item.id as fallbacks
-			if (
-				item.id &&
-				typeof item.id === 'object' &&
-				'value' in item.id &&
-				item.id.value
-			) {
-				id = String(item.id.value);
-				if (this._config.debug)
-					console.log(`Using id.value as fallback: ${id}`);
-			} else if (item.id) {
-				id = String(item.id);
-				if (this._config.debug)
-					console.log(`Using direct item.id as fallback: ${id}`);
-			} else {
-				// If no ID found at all, use the title instead (will be extracted below)
-				if (this._config.debug)
-					console.log(`No ID found, will use title as fallback`);
-				id = null;
+			// Try common fallback fields for ID
+			const fallbackFields = ['id', 'value', 'key', 'pk'];
+			for (const field of fallbackFields) {
+				if (item[field] !== null && item[field] !== undefined) {
+					id = String(item[field]);
+					if (this._config.debug)
+						console.log(`Using fallback field '${field}' for ID: ${id}`);
+					break;
+				}
 			}
-		} else if (typeof id === 'object') {
-			// If ID is an object, log the issue and set to null to use title fallback
-			console.warn(
-				`ID for path ${valueField} is an object, will use title fallback instead`,
-			);
-			id = null;
 		} else {
-			// Otherwise, ensure it's a string
 			id = String(id);
-			if (this._config.debug) console.log(`Final ID value: ${id}`);
 		}
 
-		// Try to get a usable title, with fallbacks
+		// If still no ID, generate one
+		if (!id) {
+			id = `option-${Math.random().toString(36).substr(2, 9)}`;
+			if (this._config.debug) console.log(`Generated fallback ID: ${id}`);
+		}
+
+		// Get label with proper fallbacks
 		let title = getValue(item, labelField);
-		title = title !== null ? String(title) : '';
-		if (this._config.debug)
-			console.log(`Title/label field [${labelField}]:`, title);
+		if (!title) {
+			// Try common fallback fields for title
+			const fallbackFields = [
+				'name',
+				'title',
+				'label',
+				'text',
+				'displayName',
+				'description',
+			];
+			for (const field of fallbackFields) {
+				if (item[field] !== null && item[field] !== undefined) {
+					title = String(item[field]);
+					if (this._config.debug)
+						console.log(`Using fallback field '${field}' for title: ${title}`);
+					break;
+				}
+			}
+		} else {
+			title = String(title);
+		}
 
-		// If title is still empty, try common field names
+		// If still no title, use ID as fallback
 		if (!title) {
-			// Try common field names if the configured one doesn't work
-			if (item.name) title = String(item.name);
-			else if (item.title) title = String(item.title);
-			else if (item.label) title = String(item.label);
-			else if (item.text) title = String(item.text);
+			title = `Option ${id}`;
 			if (this._config.debug)
-				console.log('After fallback checks, title:', title);
+				console.log(`Using ID as fallback title: ${title}`);
 		}
 
-		// Create the option object with non-empty values
-		const result = {
-			id: id || title || 'id-' + Math.random().toString(36).substr(2, 9), // Ensure we always have an ID
-			title: title || 'Unnamed option',
+		// Create the option object with consistent structure
+		const result: KTSelectOptionData = {
+			id: id,
+			title: title,
+			selected: Boolean(item.selected),
+			disabled: Boolean(item.disabled),
 		};
 
 		if (this._config.debug)

package/src/components/select/search.ts

@@ -6,11 +6,7 @@
 import { KTSelectConfigInterface } from './config';
 import { KTSelect } from './select';
 import { defaultTemplates } from './templates';
-import {
-	filterOptions,
-	FocusManager,
-	EventManager,
-} from './utils';
+import { filterOptions, FocusManager, EventManager } from './utils';
 
 export class KTSelectSearch {
 	private _select: KTSelect;
@@ -63,7 +59,7 @@ export class KTSelectSearch {
 				this._eventManager.addListener(
 					this._searchInput,
 					'keydown',
-					this._handleSearchKeyDown.bind(this)
+					this._handleSearchKeyDown.bind(this),
 				);
 
 				// Add blur event listener to ensure highlights are cleared when focus is lost
@@ -96,18 +92,20 @@ export class KTSelectSearch {
 				}
 
 				// Listen for dropdown close to reset options - ATTACH TO WRAPPER
-				this._select.getWrapperElement().addEventListener('dropdown.close', () => {
-					this._focusManager.resetFocus();
-					// 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
-				});
+				this._select
+					.getWrapperElement()
+					.addEventListener('dropdown.close', () => {
+						this._focusManager.resetFocus();
+						// 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 - ATTACH TO ORIGINAL SELECT (standard 'change' event)
 				this._select.getElement().addEventListener('change', () => {
@@ -121,29 +119,32 @@ export class KTSelectSearch {
 				});
 
 				// 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();
-					}
+				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();
+						}
 
-					// 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
-					}
-				});
+						// 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
+						}
+						this._select.updateSelectAllButtonState();
+					});
 			}
 		}
 	}
@@ -164,6 +165,11 @@ export class KTSelectSearch {
 		const key = event.key;
 
 		switch (key) {
+			case ' ': // Spacebar
+				// Do nothing, allow space to be typed into the input
+				// Stop propagation to prevent parent handlers from processing this event
+				event.stopPropagation();
+				break;
 			case 'ArrowDown':
 				event.preventDefault();
 				this._focusManager.focusNext();
@@ -223,8 +229,10 @@ export class KTSelectSearch {
 	 * 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 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)!;
@@ -289,9 +297,15 @@ export class KTSelectSearch {
 		// Restore original content before filtering, so highlighting is applied fresh.
 		this._restoreOptionContentsBeforeFilter();
 
-		const visibleCount = filterOptions(options, query, config, dropdownElement, (count) =>
-			this._handleNoResults(count),
+		const visibleCount = filterOptions(
+			options,
+			query,
+			config,
+			dropdownElement,
+			(count) => this._handleNoResults(count),
 		);
+
+		this._select.updateSelectAllButtonState();
 	}
 
 	/**
@@ -324,6 +338,7 @@ export class KTSelectSearch {
 		});
 
 		this._clearNoResultsMessage(); // Ensure no results message is cleared when resetting
+		this._select.updateSelectAllButtonState();
 	}
 
 	private _handleNoResults(visibleOptionsCount: number) {