fix(core): Time with [step] has unexpected cursor jump to the nex…

…t segment on `ArrowUp`/`ArrowDown` (#1478)

.gitignore

@@ -46,6 +46,7 @@ Thumbs.db
 
 # cypress
 **/cypress/**/screenshots/**
+projects/demo-integrations/cypress
 
 .nx
 .ssl

projects/core/src/lib/classes/mask-model/utils/guess-valid-value-by-pattern.ts

@@ -22,14 +22,6 @@ export function guessValidValueByPattern(
             const newValidatedChars = validatedCharacters + leadingCharacters;
             const charConstraint = mask[newValidatedChars.length] || '';
 
-            if (isFixedCharacter(charConstraint)) {
-                return newValidatedChars + charConstraint;
-            }
-
-            if (!char.match(charConstraint)) {
-                return newValidatedChars;
-            }
-
             if (maskedFrom === null && charIndex >= elementState.selection[0]) {
                 maskedFrom = newValidatedChars.length;
             }
@@ -38,7 +30,13 @@ export function guessValidValueByPattern(
                 maskedTo = newValidatedChars.length;
             }
 
-            return newValidatedChars + char;
+            if (isFixedCharacter(charConstraint)) {
+                return newValidatedChars + charConstraint;
+            }
+
+            return char.match(charConstraint)
+                ? newValidatedChars + char
+                : newValidatedChars;
         },
         '',
     );

projects/demo-integrations/src/tests/kit/time/time-step.cy.ts

@@ -59,18 +59,18 @@ describe('Time', () => {
                         .should('have.a.prop', 'selectionEnd', 0)
                         .type('{rightArrow}')
                         .should('have.a.prop', 'selectionStart', 1)
-                        .should('have.a.prop', 'selectionStart', 1)
+                        .should('have.a.prop', 'selectionEnd', 1)
                         .type('{upArrow}')
                         .should('have.value', '13')
                         .should('have.a.prop', 'selectionStart', 1)
-                        .should('have.a.prop', 'selectionStart', 1)
+                        .should('have.a.prop', 'selectionEnd', 1)
                         .type('{rightArrow}')
                         .should('have.a.prop', 'selectionStart', 2)
-                        .should('have.a.prop', 'selectionStart', 2)
+                        .should('have.a.prop', 'selectionEnd', 2)
                         .type('{downArrow}')
                         .should('have.value', '12')
                         .should('have.a.prop', 'selectionStart', 2)
-                        .should('have.a.prop', 'selectionStart', 2);
+                        .should('have.a.prop', 'selectionEnd', 2);
                 });
 
                 it('type 12:{upArrow}{rightArrow}{downArrow}{rightArrow}{downArrow} => 12:59', () => {
@@ -79,6 +79,16 @@ describe('Time', () => {
                         .type('{rightArrow}{downArrow}'.repeat(2))
                         .should('have.value', '12:59');
                 });
+
+                it('12|:0 => {upArrow} => 13|:0', () => {
+                    cy.get('@input')
+                        .type('12:0')
+                        .type('{leftArrow}'.repeat(2))
+                        .type('{upArrow}')
+                        .should('have.value', '13:0')
+                        .should('have.a.prop', 'selectionStart', 2)
+                        .should('have.a.prop', 'selectionEnd', 2);
+                });
             });
 
             describe('step = 0', () => {
@@ -107,6 +117,40 @@ describe('Time', () => {
             });
         });
 
+        describe('HH:MM:SS', () => {
+            describe('step = 1', () => {
+                beforeEach(() => {
+                    cy.visit(`/${DemoPath.Time}/API?mode=HH:MM:SS&step=1`);
+                    cy.get('#demo-content input')
+                        .should('be.visible')
+                        .first()
+                        .focus()
+                        .clear()
+                        .as('input');
+                });
+
+                it('12|:0 => {upArrow} => 13|:0', () => {
+                    cy.get('@input')
+                        .type('12:0')
+                        .type('{leftArrow}'.repeat(2))
+                        .type('{upArrow}')
+                        .should('have.value', '13:0')
+                        .should('have.a.prop', 'selectionStart', 2)
+                        .should('have.a.prop', 'selectionEnd', 2);
+                });
+
+                it('12:34|:5 => {downArrow} => 12:33|:5 ', () => {
+                    cy.get('@input')
+                        .type('12:34:5')
+                        .type('{leftArrow}'.repeat(2))
+                        .type('{downArrow}')
+                        .should('have.value', '12:33:5')
+                        .should('have.a.prop', 'selectionStart', 5)
+                        .should('have.a.prop', 'selectionEnd', 5);
+                });
+            });
+        });
+
         describe('HH:MM:SS.MSS', () => {
             describe('step = 1', () => {
                 beforeEach(() => {