fix(kit): Placeholder can have now the same character as textfield'…

…s value (#1209)

projects/demo-integrations/src/tests/component-testing/placeholder/placeholder-has-same-characters-as-textfield.cy.ts

@@ -0,0 +1,61 @@
+import type {MaskitoOptions} from '@maskito/core';
+import {maskitoWithPlaceholder} from '@maskito/kit';
+
+import {TestInput} from '../utils';
+
+describe('Placeholder | intersects with some characters from textfield value', () => {
+    const maskitoOptions: MaskitoOptions = {
+        ...maskitoWithPlaceholder('DD/MMM/YYYY', true),
+        mask: [
+            /\d/,
+            /\d/,
+            '/',
+            /[a-zA-Z]/i,
+            /[a-zA-Z]/i,
+            /[a-zA-Z]/i,
+            '/',
+            /\d/,
+            /\d/,
+            /\d/,
+            /\d/,
+        ],
+    };
+
+    beforeEach(() => {
+        cy.mount(TestInput, {
+            componentProperties: {
+                maskitoOptions,
+            },
+        });
+    });
+
+    it('Empty => focus => show placeholder', () => {
+        cy.get('input').focus().should('have.value', 'DD/MMM/YYYY');
+    });
+
+    it('Empty => Type 31 => 31/MMM/YYYY', () => {
+        cy.get('input')
+            .type('31')
+            .should('have.value', '31/MMM/YYYY')
+            .should('have.prop', 'selectionStart', 2)
+            .should('have.prop', 'selectionEnd', 2)
+            .blur()
+            .should('have.value', '31');
+    });
+
+    it('31|/MMM/YYYY => Type May => 31/May|/YYYY', () => {
+        cy.get('input')
+            .type('31')
+            .should('have.value', '31/MMM/YYYY')
+            .type('M')
+            .should('have.value', '31/MMM/YYYY')
+            .should('have.prop', 'selectionStart', '31/M'.length)
+            .should('have.prop', 'selectionEnd', '31/M'.length)
+            .type('ay')
+            .should('have.value', '31/May/YYYY')
+            .should('have.prop', 'selectionStart', '31/May'.length)
+            .should('have.prop', 'selectionEnd', '31/May'.length)
+            .blur()
+            .should('have.value', '31/May');
+    });
+});

projects/kit/src/lib/processors/with-placeholder.ts

@@ -9,14 +9,15 @@ export function maskitoWithPlaceholder(
 ): Pick<Required<MaskitoOptions>, 'plugins' | 'postprocessors' | 'preprocessors'> & {
     removePlaceholder: (value: string) => string;
 } {
+    let lastClearValue = '';
     const removePlaceholder = (value: string): string => {
-        for (let i = value.length - 1; i >= 0; i--) {
+        for (let i = value.length - 1; i >= lastClearValue.length; i--) {
             if (value[i] !== placeholder[i]) {
                 return value.slice(0, i + 1);
             }
         }
 
-        return '';
+        return value.slice(0, lastClearValue.length);
     };
     const plugins = [maskitoCaretGuard(value => [0, removePlaceholder(value).length])];
 
@@ -64,7 +65,9 @@ export function maskitoWithPlaceholder(
             },
         ],
         postprocessors: [
-            ({value, selection}, initialElementState) =>
+            ({value, selection}, initialElementState) => {
+                lastClearValue = value;
+
                 /**
                  * If `value` still equals to `initialElementState.value`,
                  * then it means that value is patched programmatically (from Maskito's plugin or externally).
@@ -73,12 +76,13 @@ export function maskitoWithPlaceholder(
                  * For example, developer wants to remove manually placeholder (+ do something else with value) on blur.
                  * Without this condition, placeholder will be unexpectedly added again.
                  */
-                value !== initialElementState.value && (focused || !focusedOnly)
+                return value !== initialElementState.value && (focused || !focusedOnly)
                     ? {
                           value: value + placeholder.slice(value.length),
                           selection,
                       }
-                    : {value, selection},
+                    : {value, selection};
+            },
         ],
     };
 }