@keenthemes/ktui 1.1.4 → 1.1.6

package/src/components/drawer/drawer.ts

@@ -33,6 +33,7 @@ export class KTDrawer extends KTComponent implements KTDrawerInterface {
 		persistent: false,
 		container: '',
 		focus: true,
+		keepInPlaceWithin: '',
 	};
 	protected override _config: KTDrawerConfigInterface = this._defaultConfig;
 	protected _isOpen: boolean = false;
@@ -52,7 +53,6 @@ export class KTDrawer extends KTComponent implements KTDrawerInterface {
 		this._handleClose();
 		this._update();
 		this._handleContainer();
-
 	}
 
 	protected _handleClose(): void {
@@ -91,26 +91,25 @@ export class KTDrawer extends KTComponent implements KTDrawerInterface {
 
 		KTDrawer.hide();
 
-		// If drawer needs to be in front of backdrop, ensure it's in body (for proper z-index stacking)
-		// This ensures the drawer and backdrop are in the same stacking context
-		if (this._getOption('container') === 'body' && this._element.parentElement !== document.body) {
-			// Store original parent for restoration when hiding
-			if (!this._element.hasAttribute('data-kt-drawer-original-parent-id')) {
-				const originalParent = this._element.parentElement;
-				if (originalParent && originalParent !== document.body) {
-					this._element.setAttribute('data-kt-drawer-original-parent-id', originalParent.id || '');
-					// Store a reference to find the parent later (using closest to find Livewire component or header)
-					const livewireComponent = originalParent.closest('[wire\\:id]');
-					const header = originalParent.closest('header#header');
-					if (livewireComponent) {
-						this._element.setAttribute('data-kt-drawer-original-wire-id', (livewireComponent as HTMLElement).getAttribute('wire:id') || '');
-					}
-					if (header) {
-						this._element.setAttribute('data-kt-drawer-original-in-header', 'true');
+		// When container="body", move drawer to body only if NOT inside an element matching keepInPlaceWithin.
+		// When keepInPlaceWithin is set (e.g. for SPA/persisted layouts), keeping the drawer in place lets the host preserve it across navigations.
+		if (
+			this._getOption('container') === 'body' &&
+			this._element.parentElement !== document.body
+		) {
+			const keepInPlace = this._isKeepInPlace();
+			if (!keepInPlace) {
+				if (!this._element.hasAttribute('data-kt-drawer-original-parent-id')) {
+					const originalParent = this._element.parentElement;
+					if (originalParent && originalParent !== document.body) {
+						this._element.setAttribute(
+							'data-kt-drawer-original-parent-id',
+							originalParent.id || '',
+						);
 					}
 				}
+				document.body.appendChild(this._element);
 			}
-			document.body.appendChild(this._element);
 		}
 
 		if (this._getOption('backdrop') === true) this._createBackdrop();
@@ -209,23 +208,14 @@ export class KTDrawer extends KTComponent implements KTDrawerInterface {
 	protected _handleContainer(): void {
 		if (this._getOption('container')) {
 			if (this._getOption('container') === 'body') {
-				// Check if drawer is in a persisted Livewire component (like header with @persist)
-				// If so, don't move it to body - keep it in place so Livewire can preserve it
-				// This follows the same pattern as dropdowns/menus which work with wire:navigate
-				const originalParent = this._element.parentNode;
-				const isInPersistedComponent = originalParent &&
-					((originalParent as HTMLElement).closest('[wire\\:id]') !== null ||
-					 (originalParent as HTMLElement).closest('header#header') !== null);
-
-				if (isInPersistedComponent) {
-					// Don't move to body - keep in original location for Livewire persistence
-					// Use fixed positioning to achieve the same visual effect
-					// Ensure drawer has fixed positioning to work from its current location
-					if (!this._element.style.position || this._element.style.position === 'static') {
+				if (this._isKeepInPlace()) {
+					if (
+						!this._element.style.position ||
+						this._element.style.position === 'static'
+					) {
 						this._element.style.position = 'fixed';
 					}
 				} else {
-					// Not in persisted component - safe to move to body (follows original behavior)
 					document.body.appendChild(this._element);
 				}
 			} else {
@@ -236,6 +226,25 @@ export class KTDrawer extends KTComponent implements KTDrawerInterface {
 		}
 	}
 
+	/** True when drawer is inside an element matching keepInPlaceWithin (so we keep it in place instead of moving to body). */
+	protected _isKeepInPlace(): boolean {
+		const selector = (this._getOption('keepInPlaceWithin') as string)?.trim();
+		if (!selector || !this._element?.parentElement) return false;
+		const parent = this._element.parentElement;
+		const selectors = selector
+			.split(',')
+			.map((s) => s.trim())
+			.filter(Boolean);
+		for (const sel of selectors) {
+			try {
+				if (parent.closest(sel) !== null) return true;
+			} catch {
+				// invalid selector, skip
+			}
+		}
+		return false;
+	}
+
 	protected _autoFocus(): void {
 		if (!this._element) return;
 		const input: HTMLInputElement | null = this._element.querySelector(
@@ -253,7 +262,12 @@ export class KTDrawer extends KTComponent implements KTDrawerInterface {
 		this._backdropElement = document.createElement('DIV');
 		this._backdropElement.style.zIndex = (zindex - 1).toString();
 		this._backdropElement.setAttribute('data-kt-drawer-backdrop', 'true');
-		document.body.append(this._backdropElement);
+		const parent = this._element.parentElement;
+		if (parent) {
+			parent.insertBefore(this._backdropElement, this._element);
+		} else {
+			document.body.append(this._backdropElement);
+		}
 		KTDom.reflow(this._backdropElement);
 		KTDom.addClass(
 			this._backdropElement,
@@ -284,8 +298,8 @@ export class KTDrawer extends KTComponent implements KTDrawerInterface {
 		return KTUtils.stringToBoolean(this._getOption('enable'));
 	}
 
-	public toggle(): void {
-		return this._toggle();
+	public toggle(relatedTarget?: HTMLElement): void {
+		return this._toggle(relatedTarget);
 	}
 
 	public show(relatedTarget?: HTMLElement): void {
@@ -323,7 +337,9 @@ export class KTDrawer extends KTComponent implements KTDrawerInterface {
 
 		// Fallback: look for parent with data-kt-drawer attribute
 		if (reference) {
-			const drawerContainer = reference.closest('[data-kt-drawer]') as HTMLElement;
+			const drawerContainer = reference.closest(
+				'[data-kt-drawer]',
+			) as HTMLElement;
 			if (drawerContainer) return drawerContainer;
 		}
 
@@ -347,7 +363,10 @@ export class KTDrawer extends KTComponent implements KTDrawerInterface {
 	 * Wait for an element to appear in the DOM using polling with MutationObserver fallback
 	 * Useful for persisted Livewire components that may not be in DOM immediately
 	 */
-	public static waitForElement(selector: string, timeout: number = 2000): Promise<HTMLElement | null> {
+	public static waitForElement(
+		selector: string,
+		timeout: number = 2000,
+	): Promise<HTMLElement | null> {
 		return new Promise((resolve) => {
 			let resolved = false;
 
@@ -359,7 +378,9 @@ export class KTDrawer extends KTComponent implements KTDrawerInterface {
 			};
 
 			// Check if element already exists
-			const existing = document.querySelector(selector) || document.body.querySelector(selector);
+			const existing =
+				document.querySelector(selector) ||
+				document.body.querySelector(selector);
 			if (existing) {
 				doResolve(existing as HTMLElement);
 				return;
@@ -374,7 +395,9 @@ export class KTDrawer extends KTComponent implements KTDrawerInterface {
 					return;
 				}
 				attempts++;
-				const element = document.querySelector(selector) || document.body.querySelector(selector);
+				const element =
+					document.querySelector(selector) ||
+					document.body.querySelector(selector);
 				if (element) {
 					clearInterval(pollInterval);
 					doResolve(element as HTMLElement);
@@ -392,7 +415,9 @@ export class KTDrawer extends KTComponent implements KTDrawerInterface {
 					observer.disconnect();
 					return;
 				}
-				const element = document.querySelector(selector) || document.body.querySelector(selector);
+				const element =
+					document.querySelector(selector) ||
+					document.body.querySelector(selector);
 				if (element) {
 					clearInterval(pollInterval);
 					observer.disconnect();
@@ -482,13 +507,16 @@ export class KTDrawer extends KTComponent implements KTDrawerInterface {
 	}
 
 	public static handleToggle(): void {
-
 		// Add raw click listener to document.body to track all clicks
-		document.body.addEventListener('click', (rawEvent: MouseEvent) => {
-			const target = rawEvent.target as HTMLElement;
-			if (target && target.hasAttribute('data-kt-drawer-toggle')) {
-			}
-		}, true); // Use capture phase to catch before any stopPropagation
+		document.body.addEventListener(
+			'click',
+			(rawEvent: MouseEvent) => {
+				const target = rawEvent.target as HTMLElement;
+				if (target && target.hasAttribute('data-kt-drawer-toggle')) {
+				}
+			},
+			true,
+		); // Use capture phase to catch before any stopPropagation
 
 		KTEventHandler.on(
 			document.body,
@@ -504,12 +532,16 @@ export class KTDrawer extends KTComponent implements KTDrawerInterface {
 				const drawer = KTDrawer.getInstance(target);
 
 				if (drawer) {
-					drawer.toggle();
+					drawer.toggle(target);
 				} else {
 					// Drawer element not found - wait for it to appear (handles persisted Livewire components)
 					// Check if drawer exists in persisted components (might be in header that's persisted)
-					const persistedHeader = document.querySelector('[wire\\:id]')?.closest('[wire\\:id]') || document.querySelector('header#header');
-					const drawerInPersisted = persistedHeader ? persistedHeader.querySelector(selector) : null;
+					const persistedHeader =
+						document.querySelector('[wire\\:id]')?.closest('[wire\\:id]') ||
+						document.querySelector('header#header');
+					const drawerInPersisted = persistedHeader
+						? persistedHeader.querySelector(selector)
+						: null;
 
 					// Wait longer for persisted components that may take time to render
 					// Also check if drawer exists in persisted header component
@@ -522,7 +554,7 @@ export class KTDrawer extends KTComponent implements KTDrawerInterface {
 							// Get instance and toggle
 							const drawerInstance = KTDrawer.getInstance(drawerElement);
 							if (drawerInstance) {
-								drawerInstance.toggle();
+								drawerInstance.toggle(target);
 							}
 						} else {
 							// Drawer never appeared - trigger a reinit to see if it helps
@@ -530,14 +562,18 @@ export class KTDrawer extends KTComponent implements KTDrawerInterface {
 							setTimeout(() => {
 								KTDrawer.reinit();
 								// Try one more time after reinit
-								const drawerAfterReinit = document.querySelector(selector) || document.body.querySelector(selector);
+								const drawerAfterReinit =
+									document.querySelector(selector) ||
+									document.body.querySelector(selector);
 								if (drawerAfterReinit) {
 									if (!KTData.has(drawerAfterReinit as HTMLElement, 'drawer')) {
 										new KTDrawer(drawerAfterReinit as HTMLElement);
 									}
-									const drawerInstance = KTDrawer.getInstance(drawerAfterReinit as HTMLElement);
+									const drawerInstance = KTDrawer.getInstance(
+										drawerAfterReinit as HTMLElement,
+									);
 									if (drawerInstance) {
-										drawerInstance.toggle();
+										drawerInstance.toggle(target);
 									}
 								}
 							}, 500);
@@ -622,7 +658,10 @@ export class KTDrawer extends KTComponent implements KTDrawerInterface {
 		const elementsInDoc = document.querySelectorAll('[data-kt-drawer]');
 		const elementsInBody = document.body.querySelectorAll('[data-kt-drawer]');
 		// Combine and deduplicate
-		const allElements = new Set([...Array.from(elementsInDoc), ...Array.from(elementsInBody)]);
+		const allElements = new Set([
+			...Array.from(elementsInDoc),
+			...Array.from(elementsInBody),
+		]);
 		const elements = Array.from(allElements);
 		elements.forEach((element) => {
 			new KTDrawer(element as HTMLElement);
@@ -652,10 +691,12 @@ export class KTDrawer extends KTComponent implements KTDrawerInterface {
 		const elementsInDoc = document.querySelectorAll('[data-kt-drawer]');
 		const elementsInBody = document.body.querySelectorAll('[data-kt-drawer]');
 		// Combine and deduplicate
-		const allElements = new Set([...Array.from(elementsInDoc), ...Array.from(elementsInBody)]);
+		const allElements = new Set([
+			...Array.from(elementsInDoc),
+			...Array.from(elementsInBody),
+		]);
 		const elements = Array.from(allElements);
 
-
 		// Clean up existing instances
 		elements.forEach((element) => {
 			try {
@@ -684,7 +725,6 @@ export class KTDrawer extends KTComponent implements KTDrawerInterface {
 		KTDrawer.handleResize();
 		KTDrawer.handleClickAway();
 		KTDrawer.handleKeyword();
-
 	}
 }
 

package/src/components/drawer/types.ts

@@ -17,9 +17,11 @@ export interface KTDrawerConfigInterface {
 	persistent: boolean;
 	focus: boolean;
 	container: string;
+	/** When set, drawer is not moved to body when inside an element matching this selector (e.g. for SPA/persisted layouts). Comma-separated for multiple selectors. */
+	keepInPlaceWithin?: string;
 }
 export interface KTDrawerInterface {
-	show(): void;
+	show(relatedTarget?: HTMLElement): void;
 	hide(): void;
-	toggle(): void;
+	toggle(relatedTarget?: HTMLElement): void;
 }

package/src/components/dropdown/dropdown.ts

@@ -45,6 +45,8 @@ export class KTDropdown extends KTComponent implements KTDropdownInterface {
 	protected _menuElement: HTMLElement;
 	protected _isTransitioning: boolean = false;
 	protected _isOpen: boolean = false;
+	/** Timestamp when _show() was last called; used to ignore duplicate _hide() from double handlers */
+	protected _shownAt: number = 0;
 
 	constructor(element: HTMLElement, config?: KTDropdownConfigInterface) {
 		super();
@@ -206,10 +208,13 @@ export class KTDropdown extends KTComponent implements KTDropdownInterface {
 			this._fireEvent('shown');
 			this._dispatchEvent('shown');
 		});
+		this._shownAt = Date.now();
 	}
 
 	protected _hide(): void {
 		if (!this._isOpen || this._isTransitioning) return;
+		// If another handler fired _hide() right after _show() (e.g. double initHandlers), ignore
+		if (this._shownAt && Date.now() - this._shownAt < 150) return;
 
 		const payload = { cancel: false };
 		this._fireEvent('hide', payload);
@@ -386,7 +391,9 @@ export class KTDropdown extends KTComponent implements KTDropdownInterface {
 
 		// Fallback: look for parent with data-kt-dropdown attribute
 		if (reference) {
-			const dropdownContainer = reference.closest('[data-kt-dropdown]') as HTMLElement;
+			const dropdownContainer = reference.closest(
+				'[data-kt-dropdown]',
+			) as HTMLElement;
 			if (dropdownContainer) return dropdownContainer;
 		}
 

package/src/components/scrollto/scrollto.ts

@@ -3,9 +3,6 @@
  * Copyright 2025 by Keenthemes Inc
  */
 
-/* eslint-disable max-len */
-/* eslint-disable require-jsdoc */
-
 import KTData from '../../helpers/data';
 import KTDom from '../../helpers/dom';
 import KTComponent from '../component';

package/src/components/select/__tests__/ux-behaviors.test.ts

@@ -66,6 +66,24 @@ describe('KTSelect UX Behaviors', () => {
 		vi.clearAllMocks();
 	});
 
+	describe('refresh() before init (issue #109)', () => {
+		it('should not throw when refresh() is called immediately after getOrCreateInstance()', () => {
+			const selectEl = createSelectElement();
+			container.appendChild(selectEl);
+
+			// Simulate framework (e.g. Angular) setting default value by code before KTSelect init
+			(selectEl as HTMLSelectElement).value = '2';
+
+			// getOrCreateInstance returns synchronously; _setupComponent runs in a later microtask.
+			// Calling refresh() here used to throw because _dropdownContentElement was undefined.
+			const instance = KTSelect.getOrCreateInstance(selectEl, { height: 250 });
+
+			expect(() => {
+				instance.refresh();
+			}).not.toThrow();
+		});
+	});
+
 	describe('Search Autofocus Enhancement', () => {
 		it('should focus search input when dropdown opens with searchAutofocus enabled', async () => {
 			const selectEl = createSelectElement();
@@ -250,6 +268,98 @@ describe('KTSelect UX Behaviors', () => {
 			expect(select.getSelectedOptions()).toContain('1');
 		});
 
+		it('should select focused option (not first) when Enter is pressed after ArrowDown with search enabled (issue #108)', async () => {
+			const selectEl = createSelectElement([
+				{ value: 'apple', text: 'Apple' },
+				{ value: 'google', text: 'Google' },
+				{ value: 'amazon', text: 'Amazon' },
+			]);
+			container.appendChild(selectEl);
+
+			const select = new KTSelect(selectEl, {
+				enableSearch: true,
+				closeOnEnter: true,
+				height: 250,
+			});
+
+			await waitForInit(select);
+
+			// Open dropdown
+			select.openDropdown();
+			await waitFor(200);
+
+			const searchInput = select.getSearchInput();
+			expect(searchInput).toBeTruthy();
+
+			// Focus search input (user has not used arrow keys yet)
+			searchInput.focus();
+			await waitFor(50);
+
+			// Simulate user pressing ArrowDown twice: first moves to first option, second to second (Google).
+			// Enter must select the currently focused option (Google), not always the first (Apple).
+			const arrowDownEvent = (opts?: Partial<KeyboardEvent>) =>
+				new KeyboardEvent('keydown', {
+					key: 'ArrowDown',
+					bubbles: true,
+					cancelable: true,
+					...opts,
+				});
+			searchInput.dispatchEvent(arrowDownEvent());
+			await waitFor(20);
+			searchInput.dispatchEvent(arrowDownEvent());
+			await waitFor(20);
+
+			// Press Enter - should select the focused option (Google), not the first (Apple)
+			const enterEvent = new KeyboardEvent('keydown', {
+				key: 'Enter',
+				bubbles: true,
+				cancelable: true,
+			});
+			searchInput.dispatchEvent(enterEvent);
+
+			await waitFor(150);
+
+			// The highlighted option (google) must be selected, not the first (apple)
+			expect(select.getSelectedOptions()).toContain('google');
+			expect(select.getSelectedOptions()).not.toContain('apple');
+			expect(select.isDropdownOpen()).toBe(false);
+		});
+
+		it('should select focused option when Enter is pressed after ArrowDown then ArrowUp (last option focused)', async () => {
+			const selectEl = createSelectElement([
+				{ value: '1', text: 'Option 1' },
+				{ value: '2', text: 'Option 2' },
+				{ value: '3', text: 'Option 3' },
+			]);
+			container.appendChild(selectEl);
+
+			const select = new KTSelect(selectEl, {
+				enableSearch: true,
+				closeOnEnter: true,
+				height: 250,
+			});
+
+			await waitForInit(select);
+
+			select.openDropdown();
+			await waitFor(200);
+
+			const searchInput = select.getSearchInput();
+			searchInput!.focus();
+			await waitFor(50);
+
+			// ArrowDown focuses first option; ArrowUp from first wraps to last (3). Enter selects focused.
+			searchInput.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true, cancelable: true }));
+			await waitFor(20);
+			searchInput.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowUp', bubbles: true, cancelable: true }));
+			await waitFor(20);
+
+			searchInput.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true, cancelable: true }));
+			await waitFor(150);
+
+			expect(select.getSelectedOptions()).toContain('3');
+		});
+
 		it('should close dropdown and trigger selection when Enter is pressed after typing search query', async () => {
 			const selectEl = createSelectElement([
 				{ value: '1', text: 'Apple' },
@@ -671,9 +781,7 @@ describe('KTSelect UX Behaviors', () => {
 
 			// Registry should be empty (we can't directly access private static, but we can verify behavior)
 			// Opening another dropdown should work without issues
-			const selectEl2 = createSelectElement([
-				{ value: 'a', text: 'Option A' },
-			]);
+			const selectEl2 = createSelectElement([{ value: 'a', text: 'Option A' }]);
 			container.appendChild(selectEl2);
 			const select2 = new KTSelect(selectEl2, { height: 250 });
 			await waitForInit(select2);
@@ -700,9 +808,7 @@ describe('KTSelect UX Behaviors', () => {
 			await waitFor(100);
 
 			// Creating a new select should work without issues
-			const selectEl2 = createSelectElement([
-				{ value: 'a', text: 'Option A' },
-			]);
+			const selectEl2 = createSelectElement([{ value: 'a', text: 'Option A' }]);
 			container.appendChild(selectEl2);
 			const select2 = new KTSelect(selectEl2, { height: 250 });
 			await waitForInit(select2);
@@ -931,7 +1037,9 @@ describe('KTSelect UX Behaviors', () => {
 
 			const option = select
 				.getDropdownElement()
-				?.querySelector('[data-kt-select-option][data-value="1"]') as HTMLElement;
+				?.querySelector(
+					'[data-kt-select-option][data-value="1"]',
+				) as HTMLElement;
 
 			expect(option).toBeTruthy();
 			option.click();
@@ -993,5 +1101,163 @@ describe('KTSelect UX Behaviors', () => {
 			document.removeEventListener('kt-select:show', showHandler);
 		});
 	});
-});
 
+	describe('setSelectedOptions sync', () => {
+		it('should sync native select, trigger display, and dropdown option when setSelectedOptions([option]) is called (single-select)', async () => {
+			const selectEl = createSelectElement([
+				{ value: '1', text: 'Option 1' },
+				{ value: '2', text: 'Option 2' },
+				{ value: '3', text: 'Option 3' },
+			]);
+			container.appendChild(selectEl);
+
+			const select = new KTSelect(selectEl, { height: 250 });
+			await waitForInit(select);
+
+			const option2 = selectEl.querySelector(
+				'option[value="2"]',
+			) as HTMLOptionElement;
+			expect(option2).toBeTruthy();
+
+			select.setSelectedOptions([option2]);
+			await waitFor(50);
+
+			expect(select.getSelectedOptions()).toEqual(['2']);
+			expect((selectEl as HTMLSelectElement).value).toBe('2');
+			const displayEl = select.getValueDisplayElement();
+			expect(displayEl?.textContent?.trim()).toBe('Option 2');
+
+			select.openDropdown();
+			await waitFor(100);
+			const dropdownOption = select
+				.getDropdownElement()
+				?.querySelector('[data-kt-select-option][data-value="2"]');
+			expect(dropdownOption?.classList.contains('selected')).toBe(true);
+			expect(dropdownOption?.getAttribute('aria-selected')).toBe('true');
+		});
+
+		it('should sync native options, trigger/tags, and dropdown when setSelectedOptions([optionA, optionB]) is called (multi-select)', async () => {
+			const selectEl = createSelectElement([
+				{ value: 'a', text: 'A' },
+				{ value: 'b', text: 'B' },
+				{ value: 'c', text: 'C' },
+			]);
+			selectEl.setAttribute('multiple', 'multiple');
+			container.appendChild(selectEl);
+
+			const select = new KTSelect(selectEl, {
+				multiple: true,
+				height: 250,
+			});
+			await waitForInit(select);
+
+			const optionA = selectEl.querySelector(
+				'option[value="a"]',
+			) as HTMLOptionElement;
+			const optionB = selectEl.querySelector(
+				'option[value="b"]',
+			) as HTMLOptionElement;
+			expect(optionA).toBeTruthy();
+			expect(optionB).toBeTruthy();
+
+			select.setSelectedOptions([optionA, optionB]);
+			await waitFor(50);
+
+			expect(select.getSelectedOptions()).toContain('a');
+			expect(select.getSelectedOptions()).toContain('b');
+			expect(select.getSelectedOptions().length).toBe(2);
+			expect(optionA.selected).toBe(true);
+			expect(optionB.selected).toBe(true);
+			const optionC = selectEl.querySelector(
+				'option[value="c"]',
+			) as HTMLOptionElement;
+			expect(optionC.selected).toBe(false);
+
+			select.openDropdown();
+			await waitFor(100);
+			const dropdownA = select
+				.getDropdownElement()
+				?.querySelector('[data-kt-select-option][data-value="a"]');
+			const dropdownB = select
+				.getDropdownElement()
+				?.querySelector('[data-kt-select-option][data-value="b"]');
+			expect(dropdownA?.classList.contains('selected')).toBe(true);
+			expect(dropdownB?.classList.contains('selected')).toBe(true);
+		});
+
+		it('should clear selection, native select, show placeholder, and remove selected state when setSelectedOptions([]) is called', async () => {
+			const selectEl = createSelectElement([
+				{ value: '1', text: 'Option 1' },
+				{ value: '2', text: 'Option 2' },
+			]);
+			container.appendChild(selectEl);
+
+			const select = new KTSelect(selectEl, {
+				placeholder: 'Choose...',
+				height: 250,
+			});
+			await waitForInit(select);
+
+			const option1 = selectEl.querySelector(
+				'option[value="1"]',
+			) as HTMLOptionElement;
+			select.setSelectedOptions([option1]);
+			await waitFor(50);
+			expect(select.getSelectedOptions()).toEqual(['1']);
+
+			select.setSelectedOptions([]);
+			await waitFor(50);
+
+			expect(select.getSelectedOptions()).toEqual([]);
+			expect((selectEl as HTMLSelectElement).value).toBe('');
+			Array.from(selectEl.options).forEach((opt) => {
+				expect(opt.selected).toBe(false);
+			});
+			const displayEl = select.getValueDisplayElement();
+			const placeholderEl = displayEl?.querySelector(
+				'[data-kt-select-placeholder]',
+			);
+			expect(placeholderEl).toBeTruthy();
+
+			select.openDropdown();
+			await waitFor(100);
+			const options = select
+				.getDropdownElement()
+				?.querySelectorAll('[data-kt-select-option]');
+			options?.forEach((opt) => {
+				expect(opt.classList.contains('selected')).toBe(false);
+				expect(opt.getAttribute('aria-selected')).toBe('false');
+			});
+		});
+
+		it('should update trigger text immediately when setSelectedOptions([option]) is called with dropdown closed, and show option selected on next open', async () => {
+			const selectEl = createSelectElement([
+				{ value: '1', text: 'First' },
+				{ value: '2', text: 'Second' },
+				{ value: '3', text: 'Third' },
+			]);
+			container.appendChild(selectEl);
+
+			const select = new KTSelect(selectEl, { height: 250 });
+			await waitForInit(select);
+			expect(select.isDropdownOpen()).toBe(false);
+
+			const option3 = selectEl.querySelector(
+				'option[value="3"]',
+			) as HTMLOptionElement;
+			select.setSelectedOptions([option3]);
+			await waitFor(50);
+
+			const displayEl = select.getValueDisplayElement();
+			expect(displayEl?.textContent?.trim()).toBe('Third');
+
+			select.openDropdown();
+			await waitFor(100);
+			const dropdownOption = select
+				.getDropdownElement()
+				?.querySelector('[data-kt-select-option][data-value="3"]');
+			expect(dropdownOption?.classList.contains('selected')).toBe(true);
+			expect(dropdownOption?.getAttribute('aria-selected')).toBe('true');
+		});
+	});
+});

package/src/components/select/combobox.ts

@@ -53,7 +53,6 @@ export class KTSelectCombobox {
 			this._toggleClearButtonVisibility(this._searchInputElement.value);
 			// this._select.showAllOptions(); // showAllOptions might be too broad, filtering is managed by typing.
 		});
-
 	}
 
 	/**