fix(kit): Number incorrectly shift caret for 1st time insertion int…

…o textfield with initial value (#1792)
taiga-family · Oct 22, 2024 · 0049d91 · 0049d91
1 parent f783f88
commit 0049d91
Show file tree

Hide file tree

Showing 3 changed files with 67 additions and 44 deletions.
diff --git a/projects/demo-integrations/src/tests/component-testing/number/with-initial-value.cy.ts b/projects/demo-integrations/src/tests/component-testing/number/with-initial-value.cy.ts
@@ -6,56 +6,78 @@ import {TestInput} from '../utils';
 describe('Number | With initial value', () => {
     let maskitoOptions!: MaskitoOptions;
 
-    beforeEach(() => {
-        const prefix = '$';
-        const postfix = ' kg';
-
-        const numberOptions = maskitoNumberOptionsGenerator({
-            prefix,
-            postfix,
-            thousandSeparator: ' ',
+    describe('with prefix & postfix', () => {
+        beforeEach(() => {
+            const prefix = '$';
+            const postfix = ' kg';
+
+            const numberOptions = maskitoNumberOptionsGenerator({
+                prefix,
+                postfix,
+                thousandSeparator: ' ',
+            });
+
+            maskitoOptions = {
+                ...numberOptions,
+                plugins: [
+                    ...numberOptions.plugins,
+                    maskitoCaretGuard((value) => [
+                        prefix.length,
+                        value.length - postfix.length,
+                    ]),
+                ],
+            };
         });
 
-        maskitoOptions = {
-            ...numberOptions,
-            plugins: [
-                ...numberOptions.plugins,
-                maskitoCaretGuard((value) => [
-                    prefix.length,
-                    value.length - postfix.length,
-                ]),
-            ],
-        };
-    });
+        it('$6 432 kg => Select all + Backspace => $| kg', () => {
+            cy.mount(TestInput, {
+                componentProperties: {maskitoOptions, initialValue: '$6 432 kg'},
+            });
 
-    it('$6 432 kg => Select all + Backspace => $| kg', () => {
-        cy.mount(TestInput, {
-            componentProperties: {maskitoOptions, initialValue: '$6 432 kg'},
+            cy.get('input')
+                .type('{selectAll}{backspace}')
+                .should('have.value', '$ kg')
+                .should('have.prop', 'selectionStart', 1)
+                .should('have.prop', 'selectionEnd', 1);
         });
 
-        cy.get('input')
-            .type('{selectAll}{backspace}')
-            .should('have.value', '$ kg')
-            .should('have.prop', 'selectionStart', 1)
-            .should('have.prop', 'selectionEnd', 1);
+        it('$6 4|32 kg => Delete => $64|2 kg', () => {
+            cy.mount(TestInput, {
+                componentProperties: {maskitoOptions, initialValue: '$6 432 kg'},
+            });
+
+            cy.get('input')
+                .focus()
+                .type('{moveToEnd}')
+                .should('have.prop', 'selectionStart', '$6 432'.length)
+                .should('have.prop', 'selectionEnd', '$6 432'.length)
+                .type('{leftArrow}'.repeat(2))
+                .should('have.prop', 'selectionStart', '$6 4'.length)
+                .should('have.prop', 'selectionEnd', '$6 4'.length)
+                .type('{del}')
+                .should('have.value', '$642 kg')
+                .should('have.prop', 'selectionStart', '$64'.length)
+                .should('have.prop', 'selectionEnd', '$64'.length);
+        });
     });
 
-    it('$6 4|32 kg => Delete => $64|2 kg', () => {
+    it('123 45|6 789 => Type 0 (the 1st time input event) => 1 234 50|6 789', () => {
         cy.mount(TestInput, {
-            componentProperties: {maskitoOptions, initialValue: '$6 432 kg'},
+            componentProperties: {
+                maskitoOptions: maskitoNumberOptionsGenerator({
+                    thousandSeparator: ' ',
+                }),
+                initialValue: '123 456 789',
+            },
         });
 
         cy.get('input')
             .focus()
-            .type('{moveToEnd}')
-            .should('have.prop', 'selectionStart', '$6 432'.length)
-            .should('have.prop', 'selectionEnd', '$6 432'.length)
-            .type('{leftArrow}'.repeat(2))
-            .should('have.prop', 'selectionStart', '$6 4'.length)
-            .should('have.prop', 'selectionEnd', '$6 4'.length)
-            .type('{del}')
-            .should('have.value', '$642 kg')
-            .should('have.prop', 'selectionStart', '$64'.length)
-            .should('have.prop', 'selectionEnd', '$64'.length);
+            .type('{moveToStart}')
+            .type('{rightArrow}'.repeat('123 45'.length))
+            .type('0')
+            .should('have.value', '1 234 506 789')
+            .should('have.prop', 'selectionStart', '1 234 50'.length)
+            .should('have.prop', 'selectionEnd', '1 234 50'.length);
     });
 });
diff --git a/projects/demo-integrations/src/tests/kit/number/number-zero-integer-part.cy.ts b/projects/demo-integrations/src/tests/kit/number/number-zero-integer-part.cy.ts
@@ -188,11 +188,12 @@ describe('Number | Zero integer part', () => {
 
             cy.get('@input')
                 .type('0,0005')
-                .type('{moveToStart}{rightArrow}{rightArrow}')
+                .type('{moveToStart}')
+                .type('{rightArrow}'.repeat('0,'.length))
                 .type('{backspace}')
                 .should('have.value', '00_005')
-                .should('have.prop', 'selectionStart', '00'.length)
-                .should('have.prop', 'selectionEnd', '00'.length)
+                .should('have.prop', 'selectionStart', '0'.length)
+                .should('have.prop', 'selectionEnd', '0'.length)
                 .blur()
                 .should('have.value', '5');
         });

diff --git a/projects/kit/src/lib/masks/number/processors/thousand-separator-postprocessor.ts b/projects/kit/src/lib/masks/number/processors/thousand-separator-postprocessor.ts
@@ -87,11 +87,11 @@ export function createThousandSeparatorPostprocessor({
                     return char + formattedValuePart;
                 }
 
-                if (i <= initialFrom) {
+                if (i < initialFrom) {
                     from++;
                 }
 
-                if (i <= initialTo) {
+                if (i < initialTo) {
                     to++;
                 }