@keenthemes/ktui 1.2.1 → 1.2.3

package/src/components/pin-input/__tests__/pin-input.test.ts

@@ -0,0 +1,928 @@
+/**
+ * Tests for KTPinInput
+ */
+
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import { KTPinInput } from '../pin-input';
+
+function dispatchPaste(target: HTMLElement, text: string): boolean {
+	const ev = new Event('paste', { bubbles: true, cancelable: true });
+	Object.defineProperty(ev, 'clipboardData', {
+		value: {
+			getData: (type: string) =>
+				type === 'text' || type === 'text/plain' ? text : '',
+		},
+	});
+	return target.dispatchEvent(ev);
+}
+
+function createPinRoot(
+	opts: { count?: number; attrs?: Record<string, string> } = {},
+): HTMLElement {
+	const { count = 4, attrs = {} } = opts;
+	const root = document.createElement('div');
+	root.setAttribute('data-kt-pin-input', 'true');
+	for (const [k, v] of Object.entries(attrs)) {
+		root.setAttribute(k, v);
+	}
+	for (let i = 0; i < count; i++) {
+		const input = document.createElement('input');
+		input.setAttribute('type', 'text');
+		input.setAttribute('data-kt-pin-input-item', 'true');
+		root.appendChild(input);
+	}
+	return root;
+}
+
+describe('KTPinInput', () => {
+	let container: HTMLElement;
+
+	beforeEach(() => {
+		document.body.innerHTML = '';
+		container = document.createElement('div');
+		document.body.appendChild(container);
+	});
+
+	afterEach(() => {
+		document.body.innerHTML = '';
+	});
+
+	it('initializes and stores instance on root', () => {
+		const root = createPinRoot();
+		container.appendChild(root);
+		const instance = new KTPinInput(root);
+		expect(instance.getElement()).toBe(root);
+		expect(KTPinInput.getInstance(root)).toBe(instance);
+		instance.dispose();
+	});
+
+	it('returns null from getOrCreateInstance when no items', () => {
+		const root = document.createElement('div');
+		root.setAttribute('data-kt-pin-input', 'true');
+		container.appendChild(root);
+		expect(KTPinInput.getOrCreateInstance(root)).toBeNull();
+	});
+
+	it('types digit and moves focus forward', () => {
+		const root = createPinRoot({ count: 3 });
+		container.appendChild(root);
+		const instance = new KTPinInput(root);
+		const inputs = root.querySelectorAll<HTMLInputElement>(
+			'[data-kt-pin-input-item]',
+		);
+		inputs[0].focus();
+		const ev = new KeyboardEvent('keydown', {
+			key: '5',
+			bubbles: true,
+			cancelable: true,
+		});
+		inputs[0].dispatchEvent(ev);
+		expect(inputs[0].value).toBe('5');
+		expect(document.activeElement).toBe(inputs[1]);
+		instance.dispose();
+	});
+
+	it('routes a second digit to the next cell when the current cell is full', () => {
+		const root = createPinRoot({ count: 3 });
+		container.appendChild(root);
+		const instance = new KTPinInput(root);
+		const inputs = root.querySelectorAll<HTMLInputElement>(
+			'[data-kt-pin-input-item]',
+		);
+		inputs[0].value = '5';
+		inputs[0].focus();
+		inputs[0].setSelectionRange(1, 1);
+		inputs[0].dispatchEvent(
+			new KeyboardEvent('keydown', {
+				key: '6',
+				bubbles: true,
+				cancelable: true,
+			}),
+		);
+		expect(inputs[0].value).toBe('5');
+		expect(inputs[1].value).toBe('6');
+		expect(document.activeElement).toBe(inputs[2]);
+		instance.dispose();
+	});
+
+	it('sets maxLength 1 on each cell', () => {
+		const root = createPinRoot({ count: 2 });
+		container.appendChild(root);
+		const instance = new KTPinInput(root);
+		const inputs = root.querySelectorAll<HTMLInputElement>(
+			'[data-kt-pin-input-item]',
+		);
+		expect(inputs[0].maxLength).toBe(1);
+		expect(inputs[1].maxLength).toBe(1);
+		instance.dispose();
+	});
+
+	it('backspace clears non-empty focused cell', () => {
+		const root = createPinRoot({ count: 2 });
+		container.appendChild(root);
+		const instance = new KTPinInput(root);
+		const inputs = root.querySelectorAll<HTMLInputElement>(
+			'[data-kt-pin-input-item]',
+		);
+		inputs[0].value = '4';
+		inputs[0].focus();
+		inputs[0].dispatchEvent(
+			new KeyboardEvent('keydown', {
+				key: 'Backspace',
+				bubbles: true,
+				cancelable: true,
+			}),
+		);
+		expect(inputs[0].value).toBe('');
+		instance.dispose();
+	});
+
+	it('backspace clears cell then moves to previous when empty', () => {
+		const root = createPinRoot({ count: 3 });
+		container.appendChild(root);
+		const instance = new KTPinInput(root);
+		const inputs = root.querySelectorAll<HTMLInputElement>(
+			'[data-kt-pin-input-item]',
+		);
+		inputs[0].value = '1';
+		inputs[1].focus();
+		const ev = new KeyboardEvent('keydown', {
+			key: 'Backspace',
+			bubbles: true,
+			cancelable: true,
+		});
+		inputs[1].dispatchEvent(ev);
+		expect(inputs[1].value).toBe('');
+		inputs[1].dispatchEvent(
+			new KeyboardEvent('keydown', {
+				key: 'Backspace',
+				bubbles: true,
+				cancelable: true,
+			}),
+		);
+		expect(document.activeElement).toBe(inputs[0]);
+		expect(inputs[0].value).toBe('1');
+		instance.dispose();
+	});
+
+	it('arrow keys move focus', () => {
+		const root = createPinRoot({ count: 3 });
+		container.appendChild(root);
+		const instance = new KTPinInput(root);
+		const inputs = root.querySelectorAll<HTMLInputElement>(
+			'[data-kt-pin-input-item]',
+		);
+		inputs[1].focus();
+		inputs[1].dispatchEvent(
+			new KeyboardEvent('keydown', {
+				key: 'ArrowLeft',
+				bubbles: true,
+				cancelable: true,
+			}),
+		);
+		expect(document.activeElement).toBe(inputs[0]);
+		inputs[0].dispatchEvent(
+			new KeyboardEvent('keydown', {
+				key: 'ArrowRight',
+				bubbles: true,
+				cancelable: true,
+			}),
+		);
+		expect(document.activeElement).toBe(inputs[1]);
+		instance.dispose();
+	});
+
+	it('distributes multi-character input (paste / autofill path)', () => {
+		const root = createPinRoot({ count: 4 });
+		container.appendChild(root);
+		const instance = new KTPinInput(root);
+		const inputs = root.querySelectorAll<HTMLInputElement>(
+			'[data-kt-pin-input-item]',
+		);
+		inputs[0].focus();
+		inputs[0].value = '12ab34';
+		inputs[0].dispatchEvent(new Event('input', { bubbles: true }));
+		expect(inputs[0].value).toBe('1');
+		expect(inputs[1].value).toBe('2');
+		expect(inputs[2].value).toBe('3');
+		expect(inputs[3].value).toBe('4');
+		instance.dispose();
+	});
+
+	it('numeric pattern rejects letters', () => {
+		const root = createPinRoot();
+		container.appendChild(root);
+		const instance = new KTPinInput(root);
+		const inputs = root.querySelectorAll<HTMLInputElement>(
+			'[data-kt-pin-input-item]',
+		);
+		inputs[0].focus();
+		const ev = new KeyboardEvent('keydown', {
+			key: 'a',
+			bubbles: true,
+			cancelable: true,
+		});
+		inputs[0].dispatchEvent(ev);
+		expect(inputs[0].value).toBe('');
+		instance.dispose();
+	});
+
+	it('custom availableChars allows hex', () => {
+		const root = createPinRoot({
+			attrs: { 'data-kt-pin-input-available-chars': '[0-9a-fA-F]' },
+		});
+		container.appendChild(root);
+		const instance = new KTPinInput(root);
+		const inputs = root.querySelectorAll<HTMLInputElement>(
+			'[data-kt-pin-input-item]',
+		);
+		inputs[0].focus();
+		inputs[0].dispatchEvent(
+			new KeyboardEvent('keydown', {
+				key: 'a',
+				bubbles: true,
+				cancelable: true,
+			}),
+		);
+		expect(inputs[0].value).toBe('a');
+		instance.dispose();
+	});
+
+	it('fires complete when all cells filled', () => {
+		const root = createPinRoot({ count: 2 });
+		container.appendChild(root);
+		const instance = new KTPinInput(root);
+		const inputs = root.querySelectorAll<HTMLInputElement>(
+			'[data-kt-pin-input-item]',
+		);
+		const completes: unknown[] = [];
+		root.addEventListener('kt.pin-input.complete', (e) => {
+			completes.push((e as CustomEvent).detail?.payload);
+		});
+		inputs[0].focus();
+		inputs[0].dispatchEvent(
+			new KeyboardEvent('keydown', {
+				key: '1',
+				bubbles: true,
+				cancelable: true,
+			}),
+		);
+		expect(completes.length).toBe(0);
+		inputs[1].dispatchEvent(
+			new KeyboardEvent('keydown', {
+				key: '2',
+				bubbles: true,
+				cancelable: true,
+			}),
+		);
+		expect(completes.length).toBe(1);
+		expect((completes[0] as { value: string }).value).toBe('12');
+		expect((completes[0] as { complete: boolean }).complete).toBe(true);
+		instance.dispose();
+	});
+
+	it('skips disabled cells in paste distribution', () => {
+		const root = createPinRoot({ count: 4 });
+		container.appendChild(root);
+		const inputs = root.querySelectorAll<HTMLInputElement>(
+			'[data-kt-pin-input-item]',
+		);
+		inputs[2].disabled = true;
+		const instance = new KTPinInput(root);
+		inputs[0].focus();
+		inputs[0].value = '123';
+		inputs[0].dispatchEvent(new Event('input', { bubbles: true }));
+		expect(inputs[0].value).toBe('1');
+		expect(inputs[1].value).toBe('2');
+		expect(inputs[2].value).toBe('');
+		expect(inputs[3].value).toBe('3');
+		instance.dispose();
+	});
+
+	it('getValue and setValue', () => {
+		const root = createPinRoot({ count: 3 });
+		container.appendChild(root);
+		const instance = new KTPinInput(root);
+		instance.setValue('789');
+		expect(instance.getValue()).toBe('789');
+		instance.setValue('');
+		expect(instance.getValue()).toBe('');
+		instance.dispose();
+	});
+
+	it('dispose removes instance and listeners', () => {
+		const root = createPinRoot();
+		container.appendChild(root);
+		const instance = new KTPinInput(root);
+		instance.dispose();
+		expect(KTPinInput.getInstance(root)).toBeNull();
+		const inputs = root.querySelectorAll<HTMLInputElement>(
+			'[data-kt-pin-input-item]',
+		);
+		inputs[0].focus();
+		inputs[0].dispatchEvent(
+			new KeyboardEvent('keydown', {
+				key: '1',
+				bubbles: true,
+				cancelable: true,
+			}),
+		);
+		expect(inputs[0].value).toBe('');
+	});
+
+	it('syncs hidden input when name is set', () => {
+		const root = createPinRoot({
+			count: 2,
+			attrs: { 'data-kt-pin-input-name': 'otp' },
+		});
+		container.appendChild(root);
+		const instance = new KTPinInput(root);
+		const hidden = root.querySelector<HTMLInputElement>(
+			'input[type="hidden"][data-kt-pin-input-hidden]',
+		);
+		expect(hidden).toBeTruthy();
+		expect(hidden?.name).toBe('otp');
+		instance.setValue('42');
+		expect(hidden?.value).toBe('42');
+		instance.dispose();
+	});
+
+	it('lazy roots are skipped by createInstances', () => {
+		const root = createPinRoot();
+		root.setAttribute('data-kt-pin-input-lazy', 'true');
+		container.appendChild(root);
+		KTPinInput.createInstances();
+		expect(KTPinInput.getInstance(root)).toBeNull();
+	});
+
+	it('getInstance returns null for falsy element', () => {
+		expect(KTPinInput.getInstance(null as unknown as HTMLElement)).toBeNull();
+	});
+
+	it('getOrCreateInstance returns existing instance', () => {
+		const root = createPinRoot({ count: 2 });
+		container.appendChild(root);
+		const a = KTPinInput.getOrCreateInstance(root);
+		const b = KTPinInput.getOrCreateInstance(root);
+		expect(a).toBe(b);
+		a?.dispose();
+	});
+
+	it('init delegates to createInstances', () => {
+		const root = createPinRoot({ count: 1 });
+		document.body.appendChild(root);
+		KTPinInput.init();
+		expect(KTPinInput.getInstance(root)).toBeTruthy();
+		KTPinInput.getInstance(root)?.dispose();
+		root.remove();
+	});
+
+	it('createInstances initializes non-lazy roots in document', () => {
+		const root = createPinRoot({ count: 2 });
+		document.body.appendChild(root);
+		KTPinInput.createInstances();
+		const inst = KTPinInput.getInstance(root);
+		expect(inst).toBeTruthy();
+		inst?.dispose();
+		root.remove();
+	});
+
+	it('does not register instance when root has no items', () => {
+		const root = document.createElement('div');
+		root.setAttribute('data-kt-pin-input', 'true');
+		container.appendChild(root);
+		new KTPinInput(root);
+		expect(KTPinInput.getInstance(root)).toBeNull();
+	});
+
+	it('skips second constructor when instance already on connected root', () => {
+		const root = createPinRoot({ count: 1 });
+		container.appendChild(root);
+		const first = new KTPinInput(root);
+		const second = new KTPinInput(root);
+		expect(KTPinInput.getInstance(root)).toBe(first);
+		expect(second).not.toBe(first);
+		first.dispose();
+	});
+
+	it('Home and End move focus to first and last cell', () => {
+		const root = createPinRoot({ count: 3 });
+		container.appendChild(root);
+		const instance = new KTPinInput(root);
+		const inputs = root.querySelectorAll<HTMLInputElement>(
+			'[data-kt-pin-input-item]',
+		);
+		inputs[1].focus();
+		inputs[1].dispatchEvent(
+			new KeyboardEvent('keydown', {
+				key: 'Home',
+				bubbles: true,
+				cancelable: true,
+			}),
+		);
+		expect(document.activeElement).toBe(inputs[0]);
+		inputs[0].dispatchEvent(
+			new KeyboardEvent('keydown', {
+				key: 'End',
+				bubbles: true,
+				cancelable: true,
+			}),
+		);
+		expect(document.activeElement).toBe(inputs[2]);
+		instance.dispose();
+	});
+
+	it('ignores printable keys with ctrl modifier', () => {
+		const root = createPinRoot({ count: 1 });
+		container.appendChild(root);
+		const instance = new KTPinInput(root);
+		const inputs = root.querySelectorAll<HTMLInputElement>(
+			'[data-kt-pin-input-item]',
+		);
+		inputs[0].focus();
+		inputs[0].value = '';
+		inputs[0].dispatchEvent(
+			new KeyboardEvent('keydown', {
+				key: '1',
+				ctrlKey: true,
+				bubbles: true,
+				cancelable: true,
+			}),
+		);
+		expect(inputs[0].value).toBe('');
+		instance.dispose();
+	});
+
+	it('keydown ignores disabled pin item as target', () => {
+		const root = createPinRoot({ count: 2 });
+		container.appendChild(root);
+		const instance = new KTPinInput(root);
+		const inputs = root.querySelectorAll<HTMLInputElement>(
+			'[data-kt-pin-input-item]',
+		);
+		inputs[0].disabled = true;
+		inputs[0].dispatchEvent(
+			new KeyboardEvent('keydown', {
+				key: '1',
+				bubbles: true,
+				cancelable: true,
+			}),
+		);
+		expect(inputs[0].value).toBe('');
+		instance.dispose();
+	});
+
+	it('keydown ignores events whose target is not a pin cell', () => {
+		const root = createPinRoot({ count: 1 });
+		container.appendChild(root);
+		const instance = new KTPinInput(root);
+		const ev = new KeyboardEvent('keydown', {
+			key: '1',
+			bubbles: true,
+			cancelable: true,
+		});
+		Object.defineProperty(ev, 'target', {
+			value: document.body,
+			enumerable: true,
+		});
+		root.dispatchEvent(ev);
+		instance.dispose();
+	});
+
+	it('reuses existing hidden field when present', () => {
+		const root = createPinRoot({
+			count: 1,
+			attrs: { 'data-kt-pin-input-name': 'code' },
+		});
+		const existing = document.createElement('input');
+		existing.type = 'hidden';
+		existing.name = 'code';
+		existing.setAttribute('data-kt-pin-input-hidden', 'true');
+		root.appendChild(existing);
+		container.appendChild(root);
+		const instance = new KTPinInput(root);
+		const hiddens = root.querySelectorAll(
+			'input[type="hidden"][data-kt-pin-input-hidden]',
+		);
+		expect(hiddens.length).toBe(1);
+		expect(hiddens[0]).toBe(existing);
+		instance.dispose();
+	});
+
+	it('falls back to digits when availableChars is invalid regex', () => {
+		const root = createPinRoot({
+			attrs: { 'data-kt-pin-input-available-chars': '(' },
+		});
+		container.appendChild(root);
+		const instance = new KTPinInput(root);
+		const inputs = root.querySelectorAll<HTMLInputElement>(
+			'[data-kt-pin-input-item]',
+		);
+		inputs[0].focus();
+		inputs[0].dispatchEvent(
+			new KeyboardEvent('keydown', {
+				key: '7',
+				bubbles: true,
+				cancelable: true,
+			}),
+		);
+		expect(inputs[0].value).toBe('7');
+		inputs[0].dispatchEvent(
+			new KeyboardEvent('keydown', {
+				key: 'a',
+				bubbles: true,
+				cancelable: true,
+			}),
+		);
+		expect(inputs[0].value).toBe('7');
+		instance.dispose();
+	});
+
+	it('paste distributes filtered digits', () => {
+		const root = createPinRoot({ count: 3 });
+		container.appendChild(root);
+		const instance = new KTPinInput(root);
+		const inputs = root.querySelectorAll<HTMLInputElement>(
+			'[data-kt-pin-input-item]',
+		);
+		inputs[0].focus();
+		dispatchPaste(inputs[0], '8x9');
+		expect(inputs[0].value).toBe('8');
+		expect(inputs[1].value).toBe('9');
+		expect(inputs[2].value).toBe('');
+		instance.dispose();
+	});
+
+	it('paste with empty text is a no-op for values', () => {
+		const root = createPinRoot({ count: 2 });
+		container.appendChild(root);
+		const instance = new KTPinInput(root);
+		const inputs = root.querySelectorAll<HTMLInputElement>(
+			'[data-kt-pin-input-item]',
+		);
+		inputs[0].value = '1';
+		inputs[0].focus();
+		dispatchPaste(inputs[0], '');
+		expect(inputs[0].value).toBe('1');
+		instance.dispose();
+	});
+
+	it('paste ignores events whose target is not a pin cell', () => {
+		const root = createPinRoot({ count: 1 });
+		container.appendChild(root);
+		const instance = new KTPinInput(root);
+		const ev = new Event('paste', { bubbles: true, cancelable: true });
+		Object.defineProperty(ev, 'clipboardData', {
+			value: { getData: () => '99' },
+		});
+		Object.defineProperty(ev, 'target', {
+			value: document.body,
+			enumerable: true,
+		});
+		root.dispatchEvent(ev);
+		instance.dispose();
+	});
+
+	it('beforeinput insertFromPaste is prevented (paste handler applies)', () => {
+		const root = createPinRoot({ count: 2 });
+		container.appendChild(root);
+		const instance = new KTPinInput(root);
+		const inputs = root.querySelectorAll<HTMLInputElement>(
+			'[data-kt-pin-input-item]',
+		);
+		inputs[0].focus();
+		const ev = new InputEvent('beforeinput', {
+			bubbles: true,
+			cancelable: true,
+			inputType: 'insertFromPaste',
+		});
+		const prevented = !inputs[0].dispatchEvent(ev);
+		expect(prevented).toBe(true);
+		instance.dispose();
+	});
+
+	it('beforeinput insertText multi-char distributes', () => {
+		const root = createPinRoot({ count: 3 });
+		container.appendChild(root);
+		const instance = new KTPinInput(root);
+		const inputs = root.querySelectorAll<HTMLInputElement>(
+			'[data-kt-pin-input-item]',
+		);
+		inputs[0].focus();
+		inputs[0].dispatchEvent(
+			new InputEvent('beforeinput', {
+				bubbles: true,
+				cancelable: true,
+				inputType: 'insertText',
+				data: '12',
+			}),
+		);
+		expect(inputs[0].value).toBe('1');
+		expect(inputs[1].value).toBe('2');
+		instance.dispose();
+	});
+
+	it('beforeinput multi-char with no valid chars does not fill cells', () => {
+		const root = createPinRoot({ count: 2 });
+		container.appendChild(root);
+		const instance = new KTPinInput(root);
+		const inputs = root.querySelectorAll<HTMLInputElement>(
+			'[data-kt-pin-input-item]',
+		);
+		inputs[0].focus();
+		inputs[0].dispatchEvent(
+			new InputEvent('beforeinput', {
+				bubbles: true,
+				cancelable: true,
+				inputType: 'insertText',
+				data: 'ab',
+			}),
+		);
+		expect(inputs[0].value).toBe('');
+		expect(inputs[1].value).toBe('');
+		instance.dispose();
+	});
+
+	it('beforeinput rejects invalid single character', () => {
+		const root = createPinRoot({ count: 1 });
+		container.appendChild(root);
+		const instance = new KTPinInput(root);
+		const inputs = root.querySelectorAll<HTMLInputElement>(
+			'[data-kt-pin-input-item]',
+		);
+		inputs[0].focus();
+		const ev = new InputEvent('beforeinput', {
+			bubbles: true,
+			cancelable: true,
+			inputType: 'insertText',
+			data: 'z',
+		});
+		expect(inputs[0].dispatchEvent(ev)).toBe(false);
+		instance.dispose();
+	});
+
+	it('beforeinput routes overflow digit when cell is full', () => {
+		const root = createPinRoot({ count: 2 });
+		container.appendChild(root);
+		const instance = new KTPinInput(root);
+		const inputs = root.querySelectorAll<HTMLInputElement>(
+			'[data-kt-pin-input-item]',
+		);
+		inputs[0].value = '3';
+		inputs[0].focus();
+		inputs[0].setSelectionRange(1, 1);
+		inputs[0].dispatchEvent(
+			new InputEvent('beforeinput', {
+				bubbles: true,
+				cancelable: true,
+				inputType: 'insertText',
+				data: '4',
+			}),
+		);
+		expect(inputs[0].value).toBe('3');
+		expect(inputs[1].value).toBe('4');
+		instance.dispose();
+	});
+
+	it('beforeinput insertFromYank is prevented', () => {
+		const root = createPinRoot({ count: 1 });
+		container.appendChild(root);
+		const instance = new KTPinInput(root);
+		const inputs = root.querySelectorAll<HTMLInputElement>(
+			'[data-kt-pin-input-item]',
+		);
+		inputs[0].focus();
+		const ev = new InputEvent('beforeinput', {
+			bubbles: true,
+			cancelable: true,
+			inputType: 'insertFromYank',
+		});
+		expect(inputs[0].dispatchEvent(ev)).toBe(false);
+		instance.dispose();
+	});
+
+	it('beforeinput ignores events whose target is not a pin cell', () => {
+		const root = createPinRoot({ count: 1 });
+		container.appendChild(root);
+		const instance = new KTPinInput(root);
+		const ev = new InputEvent('beforeinput', {
+			bubbles: true,
+			cancelable: true,
+			inputType: 'insertText',
+			data: '1',
+		});
+		Object.defineProperty(ev, 'target', {
+			value: document.body,
+			enumerable: true,
+		});
+		root.dispatchEvent(ev);
+		instance.dispose();
+	});
+
+	it('beforeinput without inputType is ignored', () => {
+		const root = createPinRoot({ count: 1 });
+		container.appendChild(root);
+		const instance = new KTPinInput(root);
+		const inputs = root.querySelectorAll<HTMLInputElement>(
+			'[data-kt-pin-input-item]',
+		);
+		inputs[0].focus();
+		root.dispatchEvent(new Event('beforeinput', { bubbles: true }));
+		instance.dispose();
+	});
+
+	it('beforeinput non-insertText inputType returns early', () => {
+		const root = createPinRoot({ count: 1 });
+		container.appendChild(root);
+		const instance = new KTPinInput(root);
+		const inputs = root.querySelectorAll<HTMLInputElement>(
+			'[data-kt-pin-input-item]',
+		);
+		inputs[0].focus();
+		inputs[0].dispatchEvent(
+			new InputEvent('beforeinput', {
+				bubbles: true,
+				cancelable: true,
+				inputType: 'deleteContentBackward',
+				data: null,
+			}),
+		);
+		instance.dispose();
+	});
+
+	it('beforeinput insertText with empty data returns early', () => {
+		const root = createPinRoot({ count: 1 });
+		container.appendChild(root);
+		const instance = new KTPinInput(root);
+		const inputs = root.querySelectorAll<HTMLInputElement>(
+			'[data-kt-pin-input-item]',
+		);
+		inputs[0].focus();
+		inputs[0].dispatchEvent(
+			new InputEvent('beforeinput', {
+				bubbles: true,
+				cancelable: true,
+				inputType: 'insertText',
+				data: '',
+			}),
+		);
+		instance.dispose();
+	});
+
+	it('beforeinput skips when isComposing', () => {
+		const root = createPinRoot({ count: 1 });
+		container.appendChild(root);
+		const instance = new KTPinInput(root);
+		const inputs = root.querySelectorAll<HTMLInputElement>(
+			'[data-kt-pin-input-item]',
+		);
+		inputs[0].focus();
+		const ev = new InputEvent('beforeinput', {
+			bubbles: true,
+			cancelable: true,
+			inputType: 'insertText',
+			data: '1',
+		});
+		Object.defineProperty(ev, 'isComposing', { value: true });
+		inputs[0].dispatchEvent(ev);
+		instance.dispose();
+	});
+
+	it('input event advances focus for single digit without keydown', () => {
+		const root = createPinRoot({ count: 2 });
+		container.appendChild(root);
+		const instance = new KTPinInput(root);
+		const inputs = root.querySelectorAll<HTMLInputElement>(
+			'[data-kt-pin-input-item]',
+		);
+		inputs[0].focus();
+		inputs[0].value = '5';
+		inputs[0].dispatchEvent(new Event('input', { bubbles: true }));
+		expect(document.activeElement).toBe(inputs[1]);
+		instance.dispose();
+	});
+
+	it('input clears invalid single character', () => {
+		const root = createPinRoot({ count: 1 });
+		container.appendChild(root);
+		const instance = new KTPinInput(root);
+		const inputs = root.querySelectorAll<HTMLInputElement>(
+			'[data-kt-pin-input-item]',
+		);
+		inputs[0].focus();
+		inputs[0].value = 'x';
+		inputs[0].dispatchEvent(new Event('input', { bubbles: true }));
+		expect(inputs[0].value).toBe('');
+		instance.dispose();
+	});
+
+	it('input multi-character with all invalid clears and syncs', () => {
+		const root = createPinRoot({ count: 2 });
+		container.appendChild(root);
+		const instance = new KTPinInput(root);
+		const inputs = root.querySelectorAll<HTMLInputElement>(
+			'[data-kt-pin-input-item]',
+		);
+		inputs[0].focus();
+		inputs[0].value = 'xy';
+		inputs[0].dispatchEvent(new Event('input', { bubbles: true }));
+		expect(inputs[0].value).toBe('');
+		expect(inputs[1].value).toBe('');
+		instance.dispose();
+	});
+
+	it('input ignores events from non-item targets', () => {
+		const root = createPinRoot({ count: 1 });
+		container.appendChild(root);
+		const instance = new KTPinInput(root);
+		const ev = new Event('input', { bubbles: true });
+		Object.defineProperty(ev, 'target', {
+			value: document.body,
+			enumerable: true,
+		});
+		root.dispatchEvent(ev);
+		instance.dispose();
+	});
+
+	it('replace selection in cell types new digit in same cell', () => {
+		const root = createPinRoot({ count: 2 });
+		container.appendChild(root);
+		const instance = new KTPinInput(root);
+		const inputs = root.querySelectorAll<HTMLInputElement>(
+			'[data-kt-pin-input-item]',
+		);
+		inputs[0].value = '1';
+		inputs[0].focus();
+		inputs[0].setSelectionRange(0, 1);
+		inputs[0].dispatchEvent(
+			new KeyboardEvent('keydown', {
+				key: '9',
+				bubbles: true,
+				cancelable: true,
+			}),
+		);
+		expect(inputs[0].value).toBe('9');
+		expect(inputs[1].value).toBe('');
+		instance.dispose();
+	});
+
+	it('typing on last full cell does not change next (none)', () => {
+		const root = createPinRoot({ count: 2 });
+		container.appendChild(root);
+		const instance = new KTPinInput(root);
+		const inputs = root.querySelectorAll<HTMLInputElement>(
+			'[data-kt-pin-input-item]',
+		);
+		inputs[0].value = '1';
+		inputs[1].value = '2';
+		inputs[1].focus();
+		inputs[1].setSelectionRange(1, 1);
+		inputs[1].dispatchEvent(
+			new KeyboardEvent('keydown', {
+				key: '3',
+				bubbles: true,
+				cancelable: true,
+			}),
+		);
+		expect(inputs[0].value).toBe('1');
+		expect(inputs[1].value).toBe('2');
+		instance.dispose();
+	});
+
+	it('setValue coerces non-string like empty', () => {
+		const root = createPinRoot({ count: 2 });
+		container.appendChild(root);
+		const instance = new KTPinInput(root);
+		instance.setValue(null as unknown as string);
+		expect(instance.getValue()).toBe('');
+		instance.dispose();
+	});
+
+	it('arrow past boundary does not throw', () => {
+		const root = createPinRoot({ count: 2 });
+		container.appendChild(root);
+		const instance = new KTPinInput(root);
+		const inputs = root.querySelectorAll<HTMLInputElement>(
+			'[data-kt-pin-input-item]',
+		);
+		inputs[0].focus();
+		inputs[0].dispatchEvent(
+			new KeyboardEvent('keydown', {
+				key: 'ArrowLeft',
+				bubbles: true,
+				cancelable: true,
+			}),
+		);
+		expect(document.activeElement).toBe(inputs[0]);
+		inputs[1].focus();
+		inputs[1].dispatchEvent(
+			new KeyboardEvent('keydown', {
+				key: 'ArrowRight',
+				bubbles: true,
+				cancelable: true,
+			}),
+		);
+		expect(document.activeElement).toBe(inputs[1]);
+		instance.dispose();
+	});
+});