From 424365bdb5fdd5c82830b2d0f7bba57bf4988698 Mon Sep 17 00:00:00 2001 From: Nikita Barsukov Date: Mon, 21 Oct 2024 17:08:37 +0300 Subject: [PATCH] fix(kit): `Number` fails to shift caret for 1st time insertion into textfield with initial value --- .../number/with-initial-value.cy.ts | 100 +++++++++++------- .../kit/number/number-zero-integer-part.cy.ts | 7 +- .../thousand-separator-postprocessor.ts | 4 +- 3 files changed, 67 insertions(+), 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 index 465d5aea0..3cbe0b19f 100644 --- 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 index 9f965ee07..a493ad422 100644 --- 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 index 85ddd29cf..b78eca348 100644 --- 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++; }