@keenthemes/ktui 1.1.5 → 1.1.6

package/src/components/drawer/drawer.ts

@@ -53,7 +53,6 @@ export class KTDrawer extends KTComponent implements KTDrawerInterface {
 		this._handleClose();
 		this._update();
 		this._handleContainer();
-
 	}
 
 	protected _handleClose(): void {
@@ -94,13 +93,19 @@ export class KTDrawer extends KTComponent implements KTDrawerInterface {
 
 		// 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) {
+		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 || '');
+						this._element.setAttribute(
+							'data-kt-drawer-original-parent-id',
+							originalParent.id || '',
+						);
 					}
 				}
 				document.body.appendChild(this._element);
@@ -204,7 +209,10 @@ export class KTDrawer extends KTComponent implements KTDrawerInterface {
 		if (this._getOption('container')) {
 			if (this._getOption('container') === 'body') {
 				if (this._isKeepInPlace()) {
-					if (!this._element.style.position || this._element.style.position === 'static') {
+					if (
+						!this._element.style.position ||
+						this._element.style.position === 'static'
+					) {
 						this._element.style.position = 'fixed';
 					}
 				} else {
@@ -223,7 +231,10 @@ export class KTDrawer extends KTComponent implements KTDrawerInterface {
 		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);
+		const selectors = selector
+			.split(',')
+			.map((s) => s.trim())
+			.filter(Boolean);
 		for (const sel of selectors) {
 			try {
 				if (parent.closest(sel) !== null) return true;
@@ -326,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;
 		}
 
@@ -350,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;
 
@@ -362,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;
@@ -377,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);
@@ -395,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();
@@ -485,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,
@@ -511,8 +536,12 @@ export class KTDrawer extends KTComponent implements KTDrawerInterface {
 				} 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
@@ -533,12 +562,16 @@ 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(target);
 									}
@@ -625,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);
@@ -655,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 {
@@ -687,7 +725,6 @@ export class KTDrawer extends KTComponent implements KTDrawerInterface {
 		KTDrawer.handleResize();
 		KTDrawer.handleClickAway();
 		KTDrawer.handleKeyword();
-
 	}
 }
 

package/src/components/dropdown/dropdown.ts

@@ -391,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.
 		});
-
 	}
 
 	/**

package/src/components/select/dropdown.ts

@@ -408,7 +408,6 @@ export class KTSelectDropdown extends KTComponent {
 			transitionComplete = true;
 			clearTimeout(fallbackTimer);
 
-
 			this._dropdownElement.classList.add('hidden');
 			this._dropdownElement.classList.remove('open');
 			this._toggleElement.classList.remove('active');
@@ -420,7 +419,6 @@ export class KTSelectDropdown extends KTComponent {
 			this._isOpen = false;
 
 			// Events will be handled by KTSelect
-
 		};
 
 		KTDom.transitionEnd(this._dropdownElement, completeTransition);

package/src/components/select/remote.ts

@@ -48,7 +48,7 @@ export class KTSelectRemote {
 		this._lastQuery = query || '';
 		this._currentPage = page;
 
-		let url = this._buildUrl(query, page);
+		const url = this._buildUrl(query, page);
 
 		// Dispatch search start event
 		this._dispatchEvent('remoteSearchStart');
@@ -146,12 +146,10 @@ export class KTSelectRemote {
 	 */
 	private _processData(data: any): KTSelectOptionData[] {
 		try {
-
 			let processedData = data;
 
 			// Extract data from the API property if specified
 			if (this._config.apiDataProperty && data[this._config.apiDataProperty]) {
-
 				// If pagination metadata is available, extract it
 				if (this._config.pagination) {
 					if (data.total_pages) {
@@ -173,7 +171,6 @@ export class KTSelectRemote {
 				return [];
 			}
 
-
 			// Map data to KTSelectOptionData format
 			const mappedData = processedData.map((item: any): KTSelectOptionData => {
 				const mappedItem = this._mapItemToOption(item);
@@ -235,7 +232,6 @@ export class KTSelectRemote {
 		const valueField = this._config.dataValueField || 'id';
 		const labelField = this._config.dataFieldText || 'title';
 
-
 		// Extract values using improved getValue function
 		const getValue = (obj: any, path: string): any => {
 			if (!path || !obj) return null;
@@ -256,7 +252,6 @@ export class KTSelectRemote {
 					result = result[part];
 				}
 
-
 				return result;
 			} catch (error) {
 				console.error(`Error extracting path ${path}:`, error);

package/src/components/select/search.ts

@@ -39,7 +39,6 @@ export class KTSelectSearch {
 			this._searchInput = this._select.getSearchInput();
 
 			if (this._searchInput) {
-
 				// First remove any existing listeners to prevent duplicates
 				this._removeEventListeners();
 
@@ -195,7 +194,9 @@ export class KTSelectSearch {
 			try {
 				this._searchInput?.focus();
 				// Check if focus was successful
-				const isFocused = document.activeElement === this._searchInput || this._searchInput === document.activeElement;
+				const isFocused =
+					document.activeElement === this._searchInput ||
+					this._searchInput === document.activeElement;
 				if (isFocused) {
 					// Focus successful
 					return;
@@ -241,14 +242,20 @@ export class KTSelectSearch {
 				break;
 			case 'Enter':
 				event.preventDefault();
-				const firstAvailableOption = this._focusManager.focusFirst();
+				// Use currently focused option (from arrow keys); only fall back to first if none focused
+				const optionToSelect =
+					this._focusManager.getFocusedOption() ??
+					this._focusManager.focusFirst();
 
-				if (firstAvailableOption) {
-					const optionValue = firstAvailableOption.getAttribute('data-value');
+				if (optionToSelect) {
+					const optionValue = optionToSelect.getAttribute('data-value');
 					if (optionValue) {
 						const config = this._select.getConfig();
-						const isAlreadySelected = !config.multiple && this._select.getSelectedOptions().includes(optionValue);
-						const shouldClose = !config.multiple && config.closeOnEnter !== false;
+						const isAlreadySelected =
+							!config.multiple &&
+							this._select.getSelectedOptions().includes(optionValue);
+						const shouldClose =
+							!config.multiple && config.closeOnEnter !== false;
 
 						if (isAlreadySelected && shouldClose) {
 							this._select.closeDropdown();