fix: prevent duplicated decimal points (#67)

* fix: prevent decimal point duplication

* chore: apply formatting

* test: add assertions

* chore: cleanup syntax

* chore: no single use abstraction

Author: fmaclen

src/lib/CurrencyInput.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { onMount } from "svelte";
+	import { onMount } from 'svelte';
 
 	const DEFAULT_LOCALE = 'en-US';
 	const DEFAULT_CURRENCY = 'USD';
@@ -61,7 +61,18 @@
 		const isTab = event.key === 'Tab';
 		const isInvalidCharacter = !/^\d|,|\.|-$/g.test(event.key); // Keys that are not a digit, comma, period or minus sign
 
-		if (!isDeletion && !isModifier && !isArrowKey && isInvalidCharacter && !isTab)
+		// If there is already a decimal point, don't allow more than one
+		const isPunctuationDuplicated = () => {
+			if (event.key !== ',' && event.key !== '.') return false; // Is `false` because it's not a punctuation key
+			if (isDecimalComma) return formattedValue.split(',').length >= 2;
+			if (!isDecimalComma) return formattedValue.split('.').length >= 2;
+			return false;
+		};
+
+		if (
+			isPunctuationDuplicated() ||
+			(!isDeletion && !isModifier && !isArrowKey && isInvalidCharacter && !isTab)
+		)
 			event.preventDefault();
 	};
 

tests/svelte-currency-input.test.ts

@@ -419,6 +419,41 @@ test.describe('CurrencyInput', () => {
 		await expect(dinarsFormattedInput).toHaveAttribute('placeholder', 'How many Dinars?');
 	});
 
+	test('Prevent duplicated decimal points', async ({ page }) => {
+		// Periods as decimals
+		const poundUnformattedInput = page.locator('.currencyInput__unformatted[name=pound]');
+		const poundFormattedInput = page.locator('.currencyInput__formatted[name="formatted-pound"]');
+		await expect(poundUnformattedInput).toHaveValue('1234.56');
+		await expect(poundFormattedInput).toHaveValue('£1,234.56');
+
+		await poundFormattedInput.focus();
+		await page.keyboard.type('....');
+		await expect(poundUnformattedInput).toHaveValue('1234.56');
+		await expect(poundFormattedInput).toHaveValue('£1,234.56');
+
+		// Commas as decimals
+		const colonUnformattedInput = page.locator('.currencyInput__unformatted[name=colon]');
+		const colonFormattedInput = page.locator('.currencyInput__formatted[name="formatted-colon"]');
+		await expect(colonUnformattedInput).toHaveValue('0');
+		await expect(colonFormattedInput).toHaveValue('');
+
+		await colonFormattedInput.focus();
+		await page.keyboard.type('123,,,,,');
+		await expect(colonUnformattedInput).toHaveValue('123');
+		await expect(colonFormattedInput).toHaveValue('₡123,');
+
+		// Pressing multiple commas when locale for decimals is a period
+		const dinarsUnformattedInput = page.locator('.currencyInput__unformatted[name="dinars"]');
+		const dinarsFormattedInput = page.locator('.currencyInput__formatted[name="formatted-dinars"]');
+		await expect(dinarsUnformattedInput).toHaveValue('0');
+		await expect(dinarsFormattedInput).toHaveValue('');
+
+		await dinarsFormattedInput.focus();
+		await page.keyboard.type('123,,,,,');
+		await expect(dinarsUnformattedInput).toHaveValue('123');
+		await expect(dinarsFormattedInput).toHaveValue('RSD 123.');
+	});
+
 	test.skip('Updating chained inputs have the correct behavior', async () => {
 		// TODO
 	});