@keenthemes/ktui 1.1.5 → 1.1.6

package/src/components/select/select.ts

@@ -141,13 +141,15 @@ export class KTSelect extends KTComponent {
 	/**
 	 * Override _dispatchEvent to also dispatch on document for global listeners (jQuery compatibility)
 	 */
-	protected override _dispatchEvent(eventType: string, payload: object = null): void {
+	protected override _dispatchEvent(
+		eventType: string,
+		payload: object = null,
+	): void {
 		// Call parent method to dispatch on element (existing behavior)
 		super._dispatchEvent(eventType, payload);
 
 		// Also dispatch on document if configured
-		const dispatchGlobalEvents =
-			this._config.dispatchGlobalEvents !== false; // Default to true
+		const dispatchGlobalEvents = this._config.dispatchGlobalEvents !== false; // Default to true
 		if (dispatchGlobalEvents) {
 			// Create event detail structure
 			const eventDetail = {
@@ -183,7 +185,6 @@ export class KTSelect extends KTComponent {
 	private _initializeRemoteData() {
 		if (!this._remoteModule || !this._config.remote) return;
 
-
 		// For remote data, we need to create the HTML structure first
 		// so that the component can be properly initialized
 		this._createHtmlStructure();
@@ -196,7 +197,6 @@ export class KTSelect extends KTComponent {
 		this._remoteModule
 			.fetchData()
 			.then((items) => {
-
 				// Remove placeholder/loading options before setting new items
 				this._clearExistingOptions();
 
@@ -207,7 +207,6 @@ export class KTSelect extends KTComponent {
 						// Generate options from the fetched data
 						this._generateOptionsHtml(this._element);
 
-
 						// Update the dropdown to show the new options
 						this._updateDropdownWithNewOptions();
 
@@ -316,7 +315,6 @@ export class KTSelect extends KTComponent {
 		this._options = this._dropdownContentElement.querySelectorAll(
 			'[data-kt-select-option]',
 		) as NodeListOf<HTMLElement>;
-
 	}
 
 	/**
@@ -348,7 +346,6 @@ export class KTSelect extends KTComponent {
 
 		// Apply pre-selected values captured before remote data was loaded
 		if (this._preSelectedValues.length > 0) {
-
 			// Get all available option values from the loaded remote data
 			const availableValues = Array.from(
 				this._element.querySelectorAll('option'),
@@ -365,7 +362,6 @@ export class KTSelect extends KTComponent {
 					? validPreSelectedValues
 					: [validPreSelectedValues[0]];
 
-
 				// Get any existing selections from _preSelectOptions (e.g., data-kt-select-pre-selected)
 				const existingSelections = this._state.getSelectedOptions();
 
@@ -636,7 +632,6 @@ export class KTSelect extends KTComponent {
 		this._options = this._dropdownContentElement.querySelectorAll(
 			`[data-kt-select-option]`,
 		) as NodeListOf<HTMLElement>;
-
 	}
 
 	/**
@@ -961,7 +956,6 @@ export class KTSelect extends KTComponent {
 	private _generateOptionsHtml(element: HTMLElement) {
 		const items = this._state.getItems() || [];
 
-
 		// Only modify options if we have items to replace them with
 		if (items && items.length > 0) {
 			// Clear existing options except the first empty one
@@ -997,7 +991,6 @@ export class KTSelect extends KTComponent {
 						extractedLabel !== null ? String(extractedLabel) : 'Unnamed option';
 				}
 
-
 				// Set option attributes
 				optionElement.value = value;
 				optionElement.textContent = label || 'Unnamed option';
@@ -1008,7 +1001,6 @@ export class KTSelect extends KTComponent {
 
 				element.appendChild(optionElement);
 			});
-
 		}
 	}
 
@@ -1076,8 +1068,7 @@ export class KTSelect extends KTComponent {
 		}
 
 		// Global dropdown management: close other open dropdowns if configured
-		const closeOnOtherOpen =
-			this._config.closeOnOtherOpen !== false; // Default to true
+		const closeOnOtherOpen = this._config.closeOnOtherOpen !== false; // Default to true
 		if (closeOnOtherOpen) {
 			// Close all other open dropdowns
 			const otherSelectsToClose: KTSelect[] = [];
@@ -1093,7 +1084,6 @@ export class KTSelect extends KTComponent {
 			});
 		}
 
-
 		// Set our internal flag to match what we're doing
 		this._dropdownIsOpen = true;
 
@@ -1283,16 +1273,19 @@ export class KTSelect extends KTComponent {
 	 */
 	private _syncNativeSelectValue(): void {
 		const selectedOptions = this.getSelectedOptions();
+		const selectEl = this._element as HTMLSelectElement;
 
 		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
+			// For multiple select, set each native option's selected from internal state
+			const selectedSet = new Set(selectedOptions);
+			Array.from(selectEl.options).forEach((option) => {
+				option.selected = selectedSet.has(option.value);
+			});
 		} else {
 			// For single select, set the value attribute explicitly
 			const selectedValue =
 				selectedOptions.length > 0 ? selectedOptions[0] : '';
-			(this._element as HTMLSelectElement).value = selectedValue;
+			selectEl.value = selectedValue;
 		}
 	}
 
@@ -1371,6 +1364,7 @@ export class KTSelect extends KTComponent {
 	 * Update CSS classes for selected options
 	 */
 	private _updateSelectedOptionClass(): void {
+		if (!this._dropdownContentElement) return;
 		const allOptions = this._dropdownContentElement.querySelectorAll(
 			`[data-kt-select-option]`,
 		);
@@ -1379,7 +1373,6 @@ export class KTSelect extends KTComponent {
 			typeof this._config.maxSelections === 'number' &&
 			selectedValues.length >= this._config.maxSelections;
 
-
 		allOptions.forEach((option) => {
 			const optionValue = option.getAttribute('data-value');
 			if (!optionValue) return;
@@ -1502,6 +1495,8 @@ export class KTSelect extends KTComponent {
 	public setSelectedOptions(options: HTMLOptionElement[]) {
 		const values = Array.from(options).map((option) => option.value);
 		this._state.setSelectedOptions(values);
+		this.updateSelectedOptionDisplay();
+		this._updateSelectedOptionClass();
 	}
 
 	/**
@@ -1791,8 +1786,7 @@ export class KTSelect extends KTComponent {
 			// Check if we should close based on closeOnEnter config
 			// closeOnEnter only applies to Enter key selections, but for backward compatibility,
 			// we'll respect it for all selections when explicitly set to false
-			const shouldClose =
-				this._config.closeOnEnter !== false; // Default to true
+			const shouldClose = this._config.closeOnEnter !== false; // Default to true
 			if (shouldClose) {
 				this.closeDropdown();
 			} else {
@@ -1954,7 +1948,6 @@ export class KTSelect extends KTComponent {
 						availableValues.includes(value),
 					);
 
-
 					// Add new options from remote data and restore selection state
 					items.forEach((item) => {
 						const option = document.createElement('option');
@@ -2049,7 +2042,6 @@ export class KTSelect extends KTComponent {
 						availableValues.includes(value),
 					);
 
-
 					// Mark preserved selections on new options
 					validSelections.forEach((value) => {
 						const option = Array.from(
@@ -2126,7 +2118,6 @@ export class KTSelect extends KTComponent {
 						availableValues.includes(value),
 					);
 
-
 					// Add new options and restore selection state
 					items.forEach((item) => {
 						const option = document.createElement('option');
@@ -2161,7 +2152,9 @@ export class KTSelect extends KTComponent {
 					this._fireEvent('refreshError');
 				});
 		} else {
-			// For static selects, just sync visual state
+			// For static selects, bail out if called before init (e.g. right after getOrCreateInstance)
+			if (!this._dropdownContentElement) return;
+			// Sync visual state
 			this._syncSelectionFromNative();
 
 			// Reapply ARIA attributes
@@ -2352,7 +2345,6 @@ export class KTSelect extends KTComponent {
 			this._searchModule.refreshAfterSearch();
 		}
 		this.updateSelectAllButtonState();
-
 	}
 
 	/**
@@ -2411,7 +2403,6 @@ export class KTSelect extends KTComponent {
 
 			this._element.appendChild(optionElement);
 		});
-
 	}
 
 	/**
@@ -2457,6 +2448,15 @@ export class KTSelect extends KTComponent {
 	 * Centralized keyboard event handler for all select modes
 	 */
 	private _handleKeyboardEvent(event: KeyboardEvent) {
+		// When search is enabled and focus is on the search input, let the search module be the sole
+		// handler for Enter (and Space). This avoids the select's FocusManager from selecting the wrong option.
+		if (
+			this._searchInputElement &&
+			event.target === this._searchInputElement &&
+			(event.key === 'Enter' || event.key === ' ')
+		) {
+			return;
+		}
 		// If the event target is the search input and the event was already handled (defaultPrevented),
 		// then return early to avoid duplicate processing by this broader handler.
 		if (event.target === this._searchInputElement && event.defaultPrevented) {

package/src/components/select/tags.ts

@@ -25,7 +25,6 @@ export class KTSelectTags {
 		this._config = select.getConfig();
 		this._valueDisplayElement = select.getValueDisplayElement();
 		this._eventManager = new EventManager();
-
 	}
 
 	/**

package/src/components/select/templates.ts

@@ -156,7 +156,7 @@ export const defaultTemplates: KTSelectTemplateInterface = {
 	dropdown: (
 		config: KTSelectConfigInterface & { zindex?: number; content?: string },
 	) => {
-		let template = getTemplateStrings(config).dropdown;
+		const template = getTemplateStrings(config).dropdown;
 		// If a custom dropdownTemplate is provided, it's responsible for its own content.
 		// Otherwise, the base template is used, and content is appended later.
 		if (config.dropdownTemplate) {
@@ -200,7 +200,7 @@ export const defaultTemplates: KTSelectTemplateInterface = {
 	 * Renders the load more button for pagination
 	 */
 	loadMore: (config: KTSelectConfigInterface): HTMLElement => {
-		let html = getTemplateStrings(config)
+		const html = getTemplateStrings(config)
 			.loadMore // .replace('{{loadMoreText}}', config.loadMoreText || 'Load more...') // Content is no longer in template string
 			.replace('{{class}}', config.loadMoreClass || '');
 		const element = stringToElement(html);
@@ -239,7 +239,7 @@ export const defaultTemplates: KTSelectTemplateInterface = {
 	 * Renders the display element (trigger) for the select
 	 */
 	display: (config: KTSelectConfigInterface): HTMLElement => {
-		let html = getTemplateStrings(config)
+		const html = getTemplateStrings(config)
 			.display.replace('{{tabindex}}', config.disabled ? '-1' : '0')
 			.replace('{{label}}', config.label || config.placeholder || 'Select...')
 			.replace('{{disabled}}', config.disabled ? 'aria-disabled="true"' : '')
@@ -335,7 +335,7 @@ export const defaultTemplates: KTSelectTemplateInterface = {
 	 * Renders the search input
 	 */
 	search: (config: KTSelectConfigInterface): HTMLElement => {
-		let html = getTemplateStrings(config)
+		const html = getTemplateStrings(config)
 			.search.replace(
 				'{{searchPlaceholder}}',
 				config.searchPlaceholder || 'Search...',
@@ -348,7 +348,7 @@ export const defaultTemplates: KTSelectTemplateInterface = {
 	 * Renders the no results message
 	 */
 	searchEmpty: (config: KTSelectConfigInterface): HTMLElement => {
-		let html = getTemplateStrings(config).searchEmpty.replace(
+		const html = getTemplateStrings(config).searchEmpty.replace(
 			'{{class}}',
 			config.searchEmptyClass || '',
 		);
@@ -376,7 +376,7 @@ export const defaultTemplates: KTSelectTemplateInterface = {
 		config: KTSelectConfigInterface,
 		loadingMessage: string,
 	): HTMLElement => {
-		let html = getTemplateStrings(config).loading.replace(
+		const html = getTemplateStrings(config).loading.replace(
 			'{{class}}',
 			config.loadingClass || '',
 		);
@@ -392,7 +392,7 @@ export const defaultTemplates: KTSelectTemplateInterface = {
 		option: HTMLOptionElement,
 		config: KTSelectConfigInterface,
 	): HTMLElement => {
-		let template = getTemplateStrings(config).tag;
+		const template = getTemplateStrings(config).tag;
 		let preparedContent =
 			option.textContent || option.innerText || option.value || ''; // Default content is the option's text
 
@@ -444,7 +444,7 @@ export const defaultTemplates: KTSelectTemplateInterface = {
 	 * Renders the placeholder for the select
 	 */
 	placeholder: (config: KTSelectConfigInterface): HTMLElement => {
-		let html = getTemplateStrings(config).placeholder.replace(
+		const html = getTemplateStrings(config).placeholder.replace(
 			'{{class}}',
 			config.placeholderClass || '',
 		);

package/src/components/select/utils.ts

@@ -227,7 +227,7 @@ export class FocusManager {
 			this._focusedOptionIndex === null
 				? 0
 				: (this._focusedOptionIndex + 1) % options.length;
-		let startIdx = idx;
+		const startIdx = idx;
 		do {
 			const option = options[idx];
 			if (
@@ -255,7 +255,7 @@ export class FocusManager {
 			this._focusedOptionIndex === null
 				? options.length - 1
 				: (this._focusedOptionIndex - 1 + options.length) % options.length;
-		let startIdx = idx;
+		const startIdx = idx;
 		do {
 			const option = options[idx];
 			if (
@@ -367,6 +367,19 @@ export class FocusManager {
 			return options[this._focusedOptionIndex];
 		}
 
+		// Fallback: DOM may have focus class applied (e.g. by arrow keys from search input)
+		// while _focusedOptionIndex is out of sync. Use the option that has the focus class.
+		const focusedEl = this._element.querySelector(
+			`${this._optionsSelector}.${this._focusClass}`,
+		) as HTMLElement | null;
+		if (focusedEl && !focusedEl.classList.contains('hidden') && focusedEl.style.display !== 'none') {
+			const idx = options.indexOf(focusedEl);
+			if (idx >= 0) {
+				this._focusedOptionIndex = idx;
+				return focusedEl;
+			}
+		}
+
 		return null;
 	}
 

package/src/components/sticky/__tests__/sticky.test.ts

@@ -0,0 +1,205 @@
+/**
+ * Tests for KTSticky component (PR #107: release delay, active/release classes, debounce)
+ */
+
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
+import * as KTDomModule from '../../../helpers/dom';
+import { KTSticky } from '../sticky';
+import { waitFor } from '../../datatable/__tests__/setup';
+
+describe('KTSticky', () => {
+	let stickyEl: HTMLElement;
+	let wrapper: HTMLElement;
+	let scrollTop = 0;
+
+	beforeEach(() => {
+		document.body.innerHTML = '';
+		scrollTop = 0;
+		vi.spyOn(KTDomModule.default, 'getScrollTop').mockImplementation(() => scrollTop);
+		vi.spyOn(KTDomModule.default, 'getViewPort').mockReturnValue({ height: 800, width: 1024 });
+
+		wrapper = document.createElement('div');
+		wrapper.setAttribute('data-kt-sticky-wrapper', 'true');
+		wrapper.style.height = '60px';
+
+		stickyEl = document.createElement('div');
+		stickyEl.setAttribute('data-kt-sticky', 'true');
+		stickyEl.setAttribute('data-kt-sticky-name', 'test');
+		stickyEl.setAttribute('data-kt-sticky-target', 'body');
+		stickyEl.setAttribute('data-kt-sticky-offset', '100');
+		stickyEl.setAttribute('data-kt-sticky-zindex', '10'); // required for _enable() to set position: fixed
+		stickyEl.style.height = '60px';
+		wrapper.appendChild(stickyEl);
+		document.body.appendChild(wrapper);
+	});
+
+	afterEach(() => {
+		vi.useRealTimers();
+		vi.restoreAllMocks();
+		document.body.innerHTML = '';
+	});
+
+	describe('PR #107: data-kt-sticky-release-delay', () => {
+		it('reads releaseDelay from data-kt-sticky-release-delay attribute', () => {
+			stickyEl.setAttribute('data-kt-sticky-release-delay', '300');
+			const instance = new KTSticky(stickyEl);
+			expect(instance.getOption('releaseDelay')).toBe(300);
+			instance.dispose();
+		});
+
+		it('delays clearing inline styles when sticky is released (smooth exit)', async () => {
+			vi.useFakeTimers();
+			stickyEl.setAttribute('data-kt-sticky-release-delay', '250');
+			const instance = new KTSticky(stickyEl);
+
+			// Scroll past offset -> sticky becomes active (sync, no debounce when not active)
+			scrollTop = 150;
+			window.dispatchEvent(new Event('scroll', { bubbles: true }));
+			vi.advanceTimersByTime(0);
+			expect(stickyEl.classList.contains('active')).toBe(true);
+			expect(stickyEl.style.position).toBe('fixed');
+
+			// Scroll back up -> release (when active, debounce 200ms then _process)
+			scrollTop = 50;
+			window.dispatchEvent(new Event('scroll', { bubbles: true }));
+			vi.advanceTimersByTime(250); // debounce 200ms + a bit
+			expect(stickyEl.classList.contains('release')).toBe(true);
+			expect(stickyEl.style.position).toBe('fixed'); // not cleared yet (delay 250ms)
+
+			vi.advanceTimersByTime(250); // release delay
+			expect(stickyEl.style.position).toBe('');
+			expect(stickyEl.style.zIndex).toBe('');
+
+			vi.useRealTimers();
+			instance.dispose();
+		});
+
+		it('with no releaseDelay, inline styles are cleared immediately on release', async () => {
+			stickyEl.removeAttribute('data-kt-sticky-release-delay');
+			const instance = new KTSticky(stickyEl);
+
+			scrollTop = 150;
+			window.dispatchEvent(new Event('scroll', { bubbles: true }));
+			await waitFor(50);
+			expect(stickyEl.style.position).toBe('fixed');
+
+			scrollTop = 50;
+			window.dispatchEvent(new Event('scroll', { bubbles: true }));
+			await waitFor(250); // debounce 200ms
+			expect(stickyEl.style.position).toBe('');
+			instance.dispose();
+		});
+	});
+
+	describe('PR #107: data-kt-sticky-active-class and data-kt-sticky-release-class', () => {
+		it('applies activeClass when sticky is active and releaseClass when released', async () => {
+			stickyEl.setAttribute('data-kt-sticky-active-class', 'sticky-on');
+			stickyEl.setAttribute('data-kt-sticky-release-class', 'sticky-off');
+			const instance = new KTSticky(stickyEl);
+
+			scrollTop = 150;
+			window.dispatchEvent(new Event('scroll', { bubbles: true }));
+			await waitFor(50);
+			expect(stickyEl.classList.contains('sticky-on')).toBe(true);
+			expect(stickyEl.classList.contains('sticky-off')).toBe(false);
+
+			scrollTop = 50;
+			window.dispatchEvent(new Event('scroll', { bubbles: true }));
+			await waitFor(250);
+			expect(stickyEl.classList.contains('sticky-on')).toBe(false);
+			expect(stickyEl.classList.contains('sticky-off')).toBe(true);
+
+			instance.dispose();
+		});
+
+		it('falls back to data-kt-sticky-class when activeClass is not set', async () => {
+			stickyEl.setAttribute('data-kt-sticky-class', 'legacy-sticky');
+			const instance = new KTSticky(stickyEl);
+
+			scrollTop = 150;
+			window.dispatchEvent(new Event('scroll', { bubbles: true }));
+			await waitFor(50);
+			expect(stickyEl.classList.contains('legacy-sticky')).toBe(true);
+			instance.dispose();
+		});
+	});
+
+	describe('debounced scroll (no flicker on rapid scroll)', () => {
+		it('when active, scroll handler debounces so _process runs after delay', async () => {
+			vi.useFakeTimers();
+			const instance = new KTSticky(stickyEl);
+			scrollTop = 150;
+			window.dispatchEvent(new Event('scroll', { bubbles: true }));
+			vi.advanceTimersByTime(0);
+			expect(stickyEl.classList.contains('active')).toBe(true);
+
+			// Rapid scroll back: multiple scroll events, only one _process after debounce
+			scrollTop = 50;
+			window.dispatchEvent(new Event('scroll', { bubbles: true }));
+			window.dispatchEvent(new Event('scroll', { bubbles: true }));
+			window.dispatchEvent(new Event('scroll', { bubbles: true }));
+			expect(stickyEl.classList.contains('release')).toBe(false); // not yet, debounce pending
+			vi.advanceTimersByTime(250);
+			expect(stickyEl.classList.contains('release')).toBe(true);
+
+			vi.useRealTimers();
+			instance.dispose();
+		});
+	});
+
+	describe('change event', () => {
+		it('fires change event when sticky becomes active and when released', async () => {
+			const instance = new KTSticky(stickyEl);
+			const changes: { active: boolean }[] = [];
+			instance.on('change', (payload: { active: boolean }) => changes.push(payload));
+
+			scrollTop = 150;
+			window.dispatchEvent(new Event('scroll', { bubbles: true }));
+			await waitFor(50);
+			expect(changes).toContainEqual({ active: true });
+
+			scrollTop = 50;
+			window.dispatchEvent(new Event('scroll', { bubbles: true }));
+			await waitFor(250);
+			expect(changes).toContainEqual({ active: false });
+
+			instance.dispose();
+		});
+	});
+
+	describe('dispose', () => {
+		it('clears release-delay timeout so _resetStyles does not run after dispose', async () => {
+			vi.useFakeTimers();
+			stickyEl.setAttribute('data-kt-sticky-release-delay', '500');
+			const instance = new KTSticky(stickyEl);
+
+			scrollTop = 150;
+			window.dispatchEvent(new Event('scroll', { bubbles: true }));
+			vi.advanceTimersByTime(0);
+
+			scrollTop = 50;
+			window.dispatchEvent(new Event('scroll', { bubbles: true }));
+			vi.advanceTimersByTime(250);
+			expect(stickyEl.style.position).toBe('fixed');
+
+			instance.dispose();
+			vi.advanceTimersByTime(600);
+			// If timeout weren't cleared, _resetStyles would have run; element is disposed so we just ensure no throw
+			vi.useRealTimers();
+		});
+	});
+
+	describe('getInstance / getOrCreateInstance', () => {
+		it('getInstance returns null for element without data-kt-sticky', () => {
+			stickyEl.removeAttribute('data-kt-sticky');
+			expect(KTSticky.getInstance(stickyEl)).toBeNull();
+		});
+
+		it('getOrCreateInstance creates instance and returns it', () => {
+			const instance = KTSticky.getOrCreateInstance(stickyEl);
+			expect(instance).toBeInstanceOf(KTSticky);
+			expect(KTSticky.getInstance(stickyEl)).toBe(instance);
+			instance.dispose();
+		});
+	});
+});