@keenthemes/ktui 1.1.0 → 1.1.1

package/src/components/datatable/__tests__/race-conditions.test.ts

@@ -0,0 +1,455 @@
+/**
+ * Race Condition Tests for KTDataTable
+ * Tests the fixes for concurrent request handling, request cancellation, and stale response detection
+ */
+
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
+import { KTDataTable } from '../datatable';
+import { waitFor } from './setup';
+
+describe('KTDataTable Race Condition Fixes', () => {
+	let container: HTMLElement;
+	let mockFetch: ReturnType<typeof vi.fn>;
+	let abortSignals: AbortSignal[] = [];
+
+	beforeEach(() => {
+		// Setup DOM
+		container = document.createElement('div');
+		container.innerHTML = `
+			<div data-kt-datatable="true">
+				<table data-kt-datatable-table="true">
+					<thead>
+						<tr>
+							<th data-kt-datatable-column="id">ID</th>
+							<th data-kt-datatable-column="name">Name</th>
+						</tr>
+					</thead>
+					<tbody></tbody>
+				</table>
+				<div data-kt-datatable-info="true"></div>
+				<select data-kt-datatable-size="true"></select>
+				<div data-kt-datatable-pagination="true"></div>
+			</div>
+		`;
+		document.body.appendChild(container);
+
+		// Mock fetch to track requests and signals
+		abortSignals = [];
+		mockFetch = vi.fn((url, options) => {
+			// Store abort signal for verification
+			if (options?.signal) {
+				abortSignals.push(options.signal);
+			}
+
+			// Simulate network delay
+			return new Promise((resolve, reject) => {
+				const timeout = setTimeout(() => {
+					if (options?.signal?.aborted) {
+						reject(new DOMException('The operation was aborted.', 'AbortError'));
+					} else {
+						resolve(
+							new Response(
+								JSON.stringify({
+									data: [
+										{ id: 1, name: 'Item 1' },
+										{ id: 2, name: 'Item 2' },
+									],
+									totalCount: 2,
+								}),
+								{ status: 200, headers: { 'Content-Type': 'application/json' } },
+							),
+						);
+					}
+				}, 100); // 100ms delay
+
+				// Handle abort
+				if (options?.signal) {
+					options.signal.addEventListener('abort', () => {
+						clearTimeout(timeout);
+						reject(new DOMException('The operation was aborted.', 'AbortError'));
+					});
+				}
+			});
+		});
+
+		global.fetch = mockFetch;
+	});
+
+	afterEach(() => {
+		document.body.removeChild(container);
+		vi.clearAllMocks();
+		abortSignals = [];
+	});
+
+	describe('AbortController Integration', () => {
+		it('should create AbortController for remote data requests', async () => {
+			const datatable = new KTDataTable(container.querySelector('[data-kt-datatable="true"]')!, {
+				apiEndpoint: '/api/data',
+			});
+
+			await waitFor(150);
+
+			expect(mockFetch).toHaveBeenCalledTimes(1);
+			expect(abortSignals.length).toBe(1);
+			expect(abortSignals[0]).toBeInstanceOf(AbortSignal);
+		});
+
+		it('should use _isFetching flag to prevent concurrent requests', async () => {
+			const datatable = new KTDataTable(container.querySelector('[data-kt-datatable="true"]')!, {
+				apiEndpoint: '/api/data',
+			});
+
+			// Try to trigger search during initial fetch
+			datatable.search('test'); // Should be blocked by _isFetching
+
+			await waitFor(150);
+
+			// Should only have 1 request (initial) because _isFetching blocked the second
+			expect(mockFetch).toHaveBeenCalledTimes(1);
+		});
+
+		it('should allow new request after previous completes', async () => {
+			const datatable = new KTDataTable(container.querySelector('[data-kt-datatable="true"]')!, {
+				apiEndpoint: '/api/data',
+			});
+
+			// Wait for initial fetch to complete
+			await waitFor(150);
+
+			// Now trigger a search - should succeed
+			datatable.search('test');
+			await waitFor(150);
+
+			// Should have 2 requests total
+			expect(mockFetch).toHaveBeenCalledTimes(2);
+			expect(abortSignals.length).toBe(2);
+		});
+
+		it('should abort previous request when _performFetchRequest is called again', async () => {
+			// This tests the AbortController logic directly by making multiple sequential requests
+			const datatable = new KTDataTable(container.querySelector('[data-kt-datatable="true"]')!, {
+				apiEndpoint: '/api/data',
+			});
+
+			await waitFor(150); // Complete initial request
+
+			// Trigger first search
+			datatable.search('first');
+			await waitFor(150);
+
+			// Trigger second search (first should complete, second starts fresh)
+			datatable.search('second');
+			await waitFor(150);
+
+			// Should have 3 requests: initial + first search + second search
+			expect(mockFetch).toHaveBeenCalledTimes(3);
+			expect(abortSignals.length).toBe(3);
+
+			// Each gets its own AbortController
+			abortSignals.forEach((signal) => {
+				expect(signal).toBeInstanceOf(AbortSignal);
+			});
+		});
+	});
+
+	describe('Request ID Sequencing', () => {
+		it('should assign incremental request IDs for sequential requests', async () => {
+			let requestIds: number[] = [];
+			let callCount = 0;
+
+			// Mock to capture request sequence
+			mockFetch.mockImplementation((url, options) => {
+				callCount++;
+				const id = callCount;
+				requestIds.push(id);
+
+				return new Promise((resolve) => {
+					setTimeout(() => {
+						resolve(
+							new Response(
+								JSON.stringify({
+									data: [{ id: id, name: `Item ${id}` }],
+									totalCount: 1,
+								}),
+								{ status: 200 },
+							),
+						);
+					}, 50);
+				});
+			});
+
+			const datatable = new KTDataTable(container.querySelector('[data-kt-datatable="true"]')!, {
+				apiEndpoint: '/api/data',
+			});
+
+			await waitFor(100); // Complete initial request
+
+			datatable.search('a');
+			await waitFor(100); // Complete search
+
+			datatable.search('b');
+			await waitFor(100); // Complete second search
+
+			// Request IDs should be sequential: 1, 2, 3
+			expect(requestIds).toEqual([1, 2, 3]);
+		});
+
+		it('should have request ID validation logic in place', async () => {
+			// This tests that request IDs are tracked internally
+			// The actual stale response scenario is prevented by _isFetching flag
+			const datatable = new KTDataTable(container.querySelector('[data-kt-datatable="true"]')!, {
+				apiEndpoint: '/api/data',
+			});
+
+			await waitFor(150); // Complete initial
+
+			datatable.search('first');
+			await waitFor(150); // Complete first search
+
+			datatable.search('second');
+			await waitFor(150); // Complete second search
+
+			// All requests should complete successfully with incremental request IDs
+			expect(mockFetch).toHaveBeenCalledTimes(3);
+
+			// Table should show data from the last successful request
+			const tbody = container.querySelector('tbody');
+			expect(tbody?.querySelectorAll('tr').length).toBeGreaterThan(0);
+		});
+	});
+
+	describe('_isFetching Flag Management', () => {
+		it('should prevent concurrent fetch executions', async () => {
+			const datatable = new KTDataTable(container.querySelector('[data-kt-datatable="true"]')!, {
+				apiEndpoint: '/api/data',
+			});
+
+			// Try to trigger reload immediately (should be blocked by initial fetch)
+			datatable.reload(); // Blocked by _isFetching
+			datatable.reload(); // Blocked by _isFetching
+
+			await waitFor(150);
+
+			// Should only have 1 request: initial
+			// The reload calls are blocked by _isFetching
+			expect(mockFetch).toHaveBeenCalledTimes(1);
+		});
+
+		it('should reset _isFetching flag after fetch completes', async () => {
+			const datatable = new KTDataTable(container.querySelector('[data-kt-datatable="true"]')!, {
+				apiEndpoint: '/api/data',
+			});
+
+			await waitFor(150); // Wait for initial fetch
+
+			// Should be able to trigger new fetch after previous completes
+			datatable.reload();
+			await waitFor(150);
+
+			expect(mockFetch).toHaveBeenCalledTimes(2);
+		});
+
+		it('should reset _isFetching flag even after fetch error', async () => {
+			let callCount = 0;
+			mockFetch.mockImplementation(() => {
+				callCount++;
+				if (callCount === 1) {
+					// Return invalid JSON to trigger parse error
+					return Promise.resolve(
+						new Response('Not JSON', { status: 200 }),
+					);
+				}
+				return Promise.resolve(
+					new Response(
+						JSON.stringify({
+							data: [{ id: 1, name: 'Success' }],
+							totalCount: 1,
+						}),
+						{ status: 200 },
+					),
+				);
+			});
+
+			const datatable = new KTDataTable(container.querySelector('[data-kt-datatable="true"]')!, {
+				apiEndpoint: '/api/data',
+			});
+
+			await waitFor(150); // Initial request triggers parse error
+
+			// Should be able to retry after error
+			datatable.reload();
+			await waitFor(150);
+
+			expect(mockFetch).toHaveBeenCalledTimes(2);
+		});
+	});
+
+	describe('Loading Spinner Management', () => {
+		it('should show spinner during fetch', async () => {
+			const element = container.querySelector('[data-kt-datatable="true"]') as HTMLElement;
+			const datatable = new KTDataTable(element, {
+				apiEndpoint: '/api/data',
+			});
+
+			await waitFor(10); // Spinner should be visible
+
+			expect(element.classList.contains('loading')).toBe(true);
+
+			await waitFor(150); // Wait for fetch to complete
+
+			expect(element.classList.contains('loading')).toBe(false);
+		});
+
+		it('should keep spinner visible during overlapping requests', async () => {
+			const element = container.querySelector('[data-kt-datatable="true"]') as HTMLElement;
+			const datatable = new KTDataTable(element, {
+				apiEndpoint: '/api/data',
+			});
+
+			await waitFor(10);
+			expect(element.classList.contains('loading')).toBe(true);
+
+			// Trigger second request while first is in progress
+			datatable.search('test');
+			await waitFor(10);
+
+			// Spinner should still be visible
+			expect(element.classList.contains('loading')).toBe(true);
+
+			await waitFor(150);
+
+			// Spinner should hide only after last request completes
+			expect(element.classList.contains('loading')).toBe(false);
+		});
+
+		it('should not flicker spinner during rapid interactions', async () => {
+			const element = container.querySelector('[data-kt-datatable="true"]') as HTMLElement;
+			const datatable = new KTDataTable(element, {
+				apiEndpoint: '/api/data',
+			});
+
+			const spinnerStates: boolean[] = [];
+			const checkInterval = setInterval(() => {
+				spinnerStates.push(element.classList.contains('loading'));
+			}, 20);
+
+			await waitFor(10);
+			datatable.search('a');
+			await waitFor(10);
+			datatable.search('ab');
+			await waitFor(10);
+			datatable.search('abc');
+
+			await waitFor(150);
+			clearInterval(checkInterval);
+
+			// Spinner should go from false -> true -> false
+			// No flickering (true -> false -> true)
+			const transitions = spinnerStates.reduce((acc, curr, idx) => {
+				if (idx > 0 && spinnerStates[idx - 1] !== curr) {
+					acc.push(curr);
+				}
+				return acc;
+			}, [] as boolean[]);
+
+			// Should have exactly 2 transitions: off->on, on->off
+			// No additional transitions that would indicate flickering
+			expect(transitions.length).toBeLessThanOrEqual(2);
+		});
+	});
+
+	describe('Event Handling During Race Conditions', () => {
+		it('should fire fetch event for successful requests', async () => {
+			const fetchEvents: any[] = [];
+
+			const element = container.querySelector('[data-kt-datatable="true"]') as HTMLElement;
+			element.addEventListener('fetch', (e) => {
+				fetchEvents.push(e);
+			});
+
+			const datatable = new KTDataTable(element, {
+				apiEndpoint: '/api/data',
+			});
+
+			await waitFor(150); // Complete initial
+
+			datatable.search('test');
+			await waitFor(150); // Complete search
+
+			// Should fire fetch for initial and search
+			expect(fetchEvents.length).toBeGreaterThanOrEqual(2);
+		});
+
+		it('should fire fetched event after successful data load', async () => {
+			const fetchedEvents: any[] = [];
+
+			const element = container.querySelector('[data-kt-datatable="true"]') as HTMLElement;
+			element.addEventListener('fetched', (e) => {
+				fetchedEvents.push(e);
+			});
+
+			const datatable = new KTDataTable(element, {
+				apiEndpoint: '/api/data',
+			});
+
+			await waitFor(150);
+
+			// Should fire fetched for initial request
+			expect(fetchedEvents.length).toBeGreaterThanOrEqual(1);
+		});
+
+		it('should not fire error events for AbortError', async () => {
+			const errorEvents: any[] = [];
+
+			const element = container.querySelector('[data-kt-datatable="true"]') as HTMLElement;
+			element.addEventListener('error.kt.datatable', (e) => {
+				errorEvents.push(e);
+			});
+
+			const datatable = new KTDataTable(element, {
+				apiEndpoint: '/api/data',
+			});
+
+			await waitFor(10);
+			datatable.search('test'); // Cancels previous
+
+			await waitFor(150);
+
+			// AbortError should not trigger error event
+			expect(errorEvents.length).toBe(0);
+		});
+	});
+
+	describe('Backward Compatibility', () => {
+		it('should work with local data mode (no AbortController needed)', async () => {
+			const datatable = new KTDataTable(container.querySelector('[data-kt-datatable="true"]')!);
+
+			// Should not call fetch for local data
+			expect(mockFetch).not.toHaveBeenCalled();
+
+			// Should still work without errors
+			datatable.search('Item 1');
+			datatable.sort('name');
+			datatable.goPage(1);
+		});
+
+		it('should maintain existing API compatibility', async () => {
+			const datatable = new KTDataTable(container.querySelector('[data-kt-datatable="true"]')!, {
+				apiEndpoint: '/api/data',
+			});
+
+			await waitFor(150);
+
+			// All existing methods should work
+			expect(() => {
+				datatable.reload();
+				datatable.search('test');
+				datatable.sort('name');
+				datatable.goPage(1);
+				datatable.setPageSize(20);
+				datatable.getState();
+			}).not.toThrow();
+		});
+	});
+});
+

package/src/components/datatable/__tests__/setup.ts

@@ -0,0 +1,67 @@
+/**
+ * Vitest setup file for datatable tests
+ * Provides DOM environment setup and utilities
+ */
+
+import { beforeEach, afterEach, vi } from 'vitest';
+
+// Mock KTComponents to prevent auto-initialization errors
+vi.mock('../../../index', () => ({
+	default: {
+		init: vi.fn(),
+	},
+	KTComponents: {
+		init: vi.fn(),
+	},
+}));
+
+// Setup DOM environment before each test
+beforeEach(() => {
+	// Clear localStorage
+	localStorage.clear();
+
+	// Reset document body
+	document.body.innerHTML = '';
+
+	// Clear any global state
+	// Add any other global setup here
+});
+
+// Cleanup after each test
+afterEach(() => {
+	// Clear localStorage
+	localStorage.clear();
+
+	// Reset document body
+	document.body.innerHTML = '';
+
+	// Clear all pending timers to prevent "document is not defined" errors
+	vi.clearAllTimers();
+});
+
+// Mock window.matchMedia if needed
+Object.defineProperty(window, 'matchMedia', {
+	writable: true,
+	value: (query: string) => ({
+		matches: false,
+		media: query,
+		onchange: null as ((this: MediaQueryList, ev: MediaQueryListEvent) => any) | null,
+		addListener: () => {}, // deprecated
+		removeListener: () => {}, // deprecated
+		addEventListener: () => {},
+		removeEventListener: () => {},
+		dispatchEvent: () => true,
+	}),
+});
+
+// Export utilities that tests can use
+export const waitFor = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
+
+export const createMockElement = (tag: string, attributes: Record<string, string> = {}) => {
+	const el = document.createElement(tag);
+	Object.entries(attributes).forEach(([key, value]) => {
+		el.setAttribute(key, value);
+	});
+	return el;
+};
+

package/src/components/datatable/datatable.ts

@@ -58,6 +58,18 @@ export class KTDataTable<T extends KTDataTableDataInterface>
 	private _data: T[] = [];
 	private _isFetching: boolean = false;
 
+	/**
+	 * AbortController for cancelling previous fetch requests
+	 * Used to prevent race conditions when multiple requests are triggered rapidly
+	 */
+	private _abortController: AbortController | null = null;
+
+	/**
+	 * Request ID counter for tracking request sequence
+	 * Used to detect and ignore stale responses from older requests
+	 */
+	private _requestId: number = 0;
+
 	constructor(element: HTMLElement, config?: KTDataTableConfigInterface) {
 		super();
 
@@ -448,15 +460,16 @@ export class KTDataTable<T extends KTDataTableDataInterface>
 		try {
 			this._showSpinner(); // Show spinner before fetching data
 
-			// Fetch data from the DOM and initialize the checkbox plugin
-			return typeof this._config.apiEndpoint === 'undefined'
-				? this._fetchDataFromLocal().then(
-						this._finalize.bind(this) as () => Promise<void>,
-					)
-				: this._fetchDataFromServer().then(
-						this._finalize.bind(this) as () => Promise<void>,
-					);
+			// Fetch data and finalize - properly await to ensure finally block runs after completion
+			if (typeof this._config.apiEndpoint === 'undefined') {
+				await this._fetchDataFromLocal();
+				await this._finalize();
+			} else {
+				await this._fetchDataFromServer();
+				await this._finalize();
+			}
 		} finally {
+			// Finally block now correctly executes after promises resolve, not immediately
 			this._isFetching = false;
 		}
 	}
@@ -703,11 +716,30 @@ export class KTDataTable<T extends KTDataTableDataInterface>
 	 * Fetch data from the server
 	 */
 	private async _fetchDataFromServer(): Promise<void> {
+		// Increment request ID to track this specific request
+		const currentRequestId = ++this._requestId;
+
 		this._fireEvent('fetch');
 		this._dispatchEvent('fetch');
 
 		const queryParams = this._getQueryParamsForFetchRequest();
-		const response = await this._performFetchRequest(queryParams);
+
+		let response: Response;
+		try {
+			response = await this._performFetchRequest(queryParams);
+		} catch (error) {
+			// Silently ignore AbortError - request was cancelled
+			if ((error as Error).name === 'AbortError') {
+				return;
+			}
+			throw error;
+		}
+
+		// Check if this response is stale (a newer request has been initiated)
+		if (currentRequestId !== this._requestId) {
+			// Ignore stale response - a more recent request is in progress or has completed
+			return;
+		}
 
 		let responseData = null;
 
@@ -730,6 +762,11 @@ export class KTDataTable<T extends KTDataTableDataInterface>
 			return;
 		}
 
+		// Double-check request ID after JSON parsing (additional safety)
+		if (currentRequestId !== this._requestId) {
+			return;
+		}
+
 		this._fireEvent('fetched', { response: responseData });
 		this._dispatchEvent('fetched', { response: responseData });
 
@@ -809,6 +846,14 @@ export class KTDataTable<T extends KTDataTableDataInterface>
 		let requestMethod: RequestInit['method'] = this._config.requestMethod;
 		let requestBody: RequestInit['body'] | undefined = undefined;
 
+		// Cancel previous request to prevent race conditions
+		if (this._abortController) {
+			this._abortController.abort();
+		}
+
+		// Create new AbortController for this request
+		this._abortController = new AbortController();
+
 		// If the request method is POST, send the query params as the request body
 		if (requestMethod === 'POST') {
 			requestBody = queryParams;
@@ -828,8 +873,15 @@ export class KTDataTable<T extends KTDataTableDataInterface>
 			...(this._config.requestCredentials && {
 				credentials: this._config.requestCredentials,
 			}),
+			// Add abort signal if available
+			...(this._abortController && { signal: this._abortController.signal }),
 		}).catch((error) => {
-			// Trigger an error event
+			// Silently ignore AbortError - this is expected when requests are cancelled
+			if (error.name === 'AbortError') {
+				return Promise.reject(error);
+			}
+
+			// Trigger an error event for non-abort errors
 			this._fireEvent('error', { error });
 			this._dispatchEvent('error', { error });
 
@@ -897,7 +949,8 @@ export class KTDataTable<T extends KTDataTableDataInterface>
 		this._fireEvent('drew');
 		this._dispatchEvent('drew');
 
-		this._hideSpinner(); // Hide spinner after data is fetched
+		// Spinner is hidden in _finalize() to ensure it stays visible until the entire request completes
+		// Removed duplicate _hideSpinner() call here to prevent premature hiding
 
 		if (this._config.stateSave) {
 			this._saveState();
@@ -1668,6 +1721,7 @@ export class KTDataTable<T extends KTDataTableDataInterface>
 			),
 			filter,
 		];
+		this._config._state.page = 1;
 		return this;
 	}
 
@@ -1677,6 +1731,7 @@ export class KTDataTable<T extends KTDataTableDataInterface>
 
 	public search(query: string | object): void {
 		this._config._state.search = query;
+		this._config._state.page = 1;
 		this.reload();
 	}
 

package/src/components/input/input.css

@@ -10,7 +10,6 @@
 		@apply outline-0 block w-full bg-background border border-input shadow-xs shadow-[rgba(0,0,0,0.05)] transition-[color,box-shadow] text-foreground placeholder:text-muted-foreground;
 		@apply focus-visible:ring-ring/30 focus-visible:border-ring focus-visible:outline-none focus-visible:ring-[3px];
 		@apply disabled:cursor-not-allowed disabled:opacity-60;
-		@apply [&[readonly]]:bg-muted/80 [&[readonly]]:cursor-not-allowed [&[readonly]]:text-secondary-foreground/80;
 		@apply file:h-full [&[type=file]]:py-0;
 		@apply file:border-solid file:border-input file:bg-transparent file:font-medium file:not-italic file:text-foreground file:p-0 file:border-0 file:border-e;
 		@apply aria-invalid:border-destructive/60 aria-invalid:ring-destructive/10;

package/src/components/select/select.css

@@ -9,7 +9,6 @@
 		@apply cursor-pointer py-0 appearance-none flex items-center gap-2 w-full bg-background border border-input shadow-xs shadow-[rgba(0,0,0,0.05)] transition-[color,box-shadow] text-foreground placeholder:text-muted-foreground/80;
 		@apply focus-visible:ring-ring/30 focus-visible:border-ring focus-visible:outline-none focus-visible:ring-[3px];
 		@apply disabled:cursor-not-allowed disabled:opacity-60;
-		@apply [&[readonly]]:opacity-70;
 		@apply aria-invalid:border-destructive/60 aria-invalid:ring-destructive/10;
 
 		background-repeat: no-repeat;

package/src/components/select/variants.css

@@ -0,0 +1,4 @@
+/**
+ * KTUI - Free & Open-Source Tailwind UI Components by Keenthemes
+ * Copyright 2025 by Keenthemes Inc
+ */

package/src/components/textarea/textarea.css

@@ -10,7 +10,6 @@
 		@apply w-full bg-background border border-input text-foreground shadow-xs shadow-[rgba(0,0,0,0.05)] transition-[color,box-shadow] placeholder:text-muted-foreground/80;
 		@apply focus-visible:border-ring focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/30;
 		@apply disabled:cursor-not-allowed disabled:opacity-60;
-		@apply [&[readonly]]:bg-muted/80 [&[readonly]]:cursor-not-allowed;
 		@apply aria-invalid:border-destructive/60 aria-invalid:ring-destructive/10;
 	}