@canutin/svelte-currency-input 0.7.0 → 0.7.2

package/CurrencyInput.svelte

@@ -26,8 +26,9 @@ const handleKeyDown = (event) => {
     const isDeletion = event.key === 'Backspace' || event.key === 'Delete';
     const isModifier = event.metaKey || event.altKey || event.ctrlKey;
     const isArrowKey = event.key === 'ArrowLeft' || event.key === 'ArrowRight';
+    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)
+    if (!isDeletion && !isModifier && !isArrowKey && isInvalidCharacter && !isTab)
         event.preventDefault();
 };
 let inputTarget;
@@ -38,28 +39,31 @@ const currencySymbol = formatCurrency(0, 0)
     .replace(/\u00A0/, ''); // e.g '0 €' > '€'
 // Updates `value` by stripping away the currency formatting
 const setUnformattedValue = (event) => {
-    // Don't format if the user is typing a `currencyDecimal` point
-    if (event.key === currencyDecimal)
-        return;
-    // Always convert _the opposite_ decimal key press to the `currencyDecimal` point
-    if (isDecimalComma && event.key === '.')
-        formattedValue = formattedValue.replace('.', currencyDecimal);
-    if (!isDecimalComma && event.key === ',')
-        formattedValue = formattedValue.replace(',', currencyDecimal);
-    // Don't format if `formattedValue` is ['$', '-$', "-"]
-    const ignoreSymbols = [currencySymbol, `-${currencySymbol}`, '-'];
-    const strippedUnformattedValue = formattedValue.replace(' ', '');
-    if (ignoreSymbols.includes(strippedUnformattedValue))
-        return;
-    // Set the starting caret positions
-    inputTarget = event.target;
+    if (event) {
+        // Don't format if the user is typing a `currencyDecimal` point
+        if (event.key === currencyDecimal)
+            return;
+        // Pressing `.` when the decimal point is `,` gets replaced with `,`
+        if (isDecimalComma && event.key === '.')
+            formattedValue = formattedValue.replace(/\.([^.]*)$/, currencyDecimal + '$1'); // Only replace the last occurence
+        // Pressing `,` when the decimal point is `.` gets replaced with `.`
+        if (!isDecimalComma && event.key === ',')
+            formattedValue = formattedValue.replace(/\,([^,]*)$/, currencyDecimal + '$1'); // Only replace the last occurence
+        // Don't format if `formattedValue` is ['$', '-$', "-"]
+        const ignoreSymbols = [currencySymbol, `-${currencySymbol}`, '-'];
+        const strippedUnformattedValue = formattedValue.replace(' ', '');
+        if (ignoreSymbols.includes(strippedUnformattedValue))
+            return;
+        // Set the starting caret positions
+        inputTarget = event.target;
+        // Reverse the value when minus is pressed
+        if (isNegativeAllowed && event.key === '-')
+            value = value * -1;
+    }
     // Remove all characters that arent: numbers, commas, periods (or minus signs if `isNegativeAllowed`)
     let unformattedValue = isNegativeAllowed
         ? formattedValue.replace(/[^0-9,.-]/g, '')
         : formattedValue.replace(/[^0-9,.]/g, '');
-    // Reverse the value when minus is pressed
-    if (isNegativeAllowed && event.key === '-')
-        value = value * -1;
     // Finally set the value
     if (Number.isNaN(parseFloat(unformattedValue))) {
         value = 0;
@@ -69,7 +73,18 @@ const setUnformattedValue = (event) => {
         unformattedValue = unformattedValue.replace(isDecimalComma ? /\./g : /\,/g, ''); // Remove all group symbols
         if (isDecimalComma)
             unformattedValue = unformattedValue.replace(',', '.'); // If the decimal point is a comma, replace it with a period
+        // If the zero-key has been pressed
+        // and if the current `value` is the same as the `value` before the key-press
+        // formatting may need to be done (Issue #30)
+        const previousValue = value;
         value = parseFloat(unformattedValue);
+        if (event && previousValue === value) {
+            // Do the formatting if the number of digits after the decimal point exceeds `fractionDigits`
+            if (unformattedValue.includes('.') &&
+                unformattedValue.split('.')[1].length > fractionDigits) {
+                setFormattedValue();
+            }
+        }
     }
 };
 const setFormattedValue = () => {
@@ -78,6 +93,8 @@ const setFormattedValue = () => {
     const previousFormattedValueLength = formattedValue.length;
     // Apply formatting to input
     formattedValue = isZero ? '' : formatCurrency(value, fractionDigits, 0);
+    // Update `value` after formatting
+    setUnformattedValue();
     // New caret position
     const endCaretPosition = startCaretPosition + formattedValue.length - previousFormattedValueLength;
     // HACK:
@@ -111,6 +128,7 @@ $: value, setFormattedValue();
 		bind:value={formattedValue}
 		on:keydown={handleKeyDown}
 		on:keyup={setUnformattedValue}
+		on:blur={setFormattedValue}
 	/>
 </div>
 

package/README.md

@@ -118,3 +118,20 @@ npm run dev
 # or start the server and open the app in a new browser tab
 npm run dev -- --open
 ```
+
+#### Integration tests
+
+The component is tested using [Playwright](https://playwright.dev/).
+You can find the tests in [`tests/svelte-currency-input.test.ts`](https://github.com/Canutin/svelte-currency-input/blob/main/tests/svelte-currency-input.test.ts)
+
+To run all tests on **Chromium**, **Firefox** and **Webkit**:
+```bash
+npm run test
+```
+
+To run all tests on a specific browser (e.g. **Webkit**):
+```bash
+npx playwright test --project=webkit
+```
+
+Additional debug commands can be found on [Playwright's documentation](https://playwright.dev/docs/test-cli).

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canutin/svelte-currency-input",
-  "version": "0.7.0",
+  "version": "0.7.2",
   "exports": {
     "./package.json": "./package.json",
     ".": "./index.js",