feat: allow form submission when pressing Enter (#82)

* feat: allow form submission when pressing `Enter` * test: pressing enter submits the form
fmaclen · Nov 1, 2024 · 126dff5 · 126dff5
1 parent 18c0b85
commit 126dff5
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 10 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/lib/CurrencyInput.svelte b/src/lib/CurrencyInput.svelte
@@ -75,6 +75,7 @@
 		const isModifier = event.metaKey || event.altKey || event.ctrlKey;
 		const isArrowKey = event.key === 'ArrowLeft' || event.key === 'ArrowRight';
 		const isTab = event.key === 'Tab';
+		const isEnter = event.key === 'Enter';
 		// Keys that are not a digit, comma, period or minus sign
 		const isInvalidCharacter = !/^\d|,|\.|-$/g.test(event.key);
 
@@ -88,7 +89,7 @@
 
 		if (
 			isPunctuationDuplicated() ||
-			(!isDeletion && !isModifier && !isArrowKey && isInvalidCharacter && !isTab)
+			(!isDeletion && !isModifier && !isArrowKey && isInvalidCharacter && !isTab && !isEnter)
 		)
 			event.preventDefault();
 	}

diff --git a/tests/svelte-currency-input.test.ts b/tests/svelte-currency-input.test.ts
@@ -534,4 +534,18 @@ test.describe('CurrencyInput', () => {
 		await expect(fourTwentySixNineInput).toBeVisible();
 		await expect(fourTwentySixNineInput).toHaveValue('-$42,069.69');
 	});
+
+	test('pressing enter submits the form', async ({ page }) => {
+		const preTag = page.locator('.demoForm__pre');
+		await expect(preTag).toContainText('Submit form to see a JSON output of the values');
+		await expect(preTag).not.toContainText('bitcoin');
+
+		const allInputs = page.locator('.currencyInput__formatted');
+		await allInputs.first().focus();
+		await expect(allInputs.first()).toHaveValue('-$42,069.69');
+
+		await page.keyboard.press('Enter');
+		await expect(preTag).not.toContainText('Submit form to see a JSON output of the values');
+		await expect(preTag).toContainText('bitcoin');
+	});
 });