fix(core): maskitoUpdateElement should not dispatch InputEvent if…

… value is not changed (#977)
taiga-family · Jan 31, 2024 · 2410b64 · 2410b64
1 parent c67d6d5
commit 2410b64
Show file tree

Hide file tree

Showing 5 changed files with 59 additions and 18 deletions.
diff --git a/projects/core/src/lib/utils/dom/update-element.ts b/projects/core/src/lib/utils/dom/update-element.ts
@@ -16,6 +16,8 @@ export function maskitoUpdateElement(
     element: HTMLInputElement | HTMLTextAreaElement,
     valueOrElementState: ElementState | string,
 ): void {
+    const initialValue = element.value;
+
     if (typeof valueOrElementState === 'string') {
         element.value = valueOrElementState;
     } else {
@@ -28,16 +30,18 @@ export function maskitoUpdateElement(
         }
     }
 
-    element.dispatchEvent(
-        new Event(
-            'input',
-            /**
-             * React handles this event only on bubbling phase
-             *
-             * here is the list of events that are processed in the capture stage, others are processed in the bubbling stage
-             * https://github.com/facebook/react/blob/cb2439624f43c510007f65aea5c50a8bb97917e4/packages/react-dom-bindings/src/events/DOMPluginEventSystem.js#L222
-             */
-            {bubbles: true},
-        ),
-    );
+    if (element.value !== initialValue) {
+        element.dispatchEvent(
+            new Event(
+                'input',
+                /**
+                 * React handles this event only on bubbling phase
+                 *
+                 * here is the list of events that are processed in the capture stage, others are processed in the bubbling stage
+                 * https://github.com/facebook/react/blob/cb2439624f43c510007f65aea5c50a8bb97917e4/packages/react-dom-bindings/src/events/DOMPluginEventSystem.js#L222
+                 */
+                {bubbles: true},
+            ),
+        );
+    }
 }
diff --git a/...-integrations/src/tests/component-testing/initial-calibration-plugin/dispatch-event.cy.ts b/...-integrations/src/tests/component-testing/initial-calibration-plugin/dispatch-event.cy.ts
@@ -0,0 +1,37 @@
+import {maskitoInitialCalibrationPlugin, MaskitoOptions} from '@maskito/core';
+import {createOutputSpy} from 'cypress/angular';
+
+import {TestInput} from '../utils';
+
+describe('InitialCalibrationPlugin | count number of dispatched input event', () => {
+    const maskitoOptions: MaskitoOptions = {
+        mask: /^\d+$/,
+        plugins: [maskitoInitialCalibrationPlugin()],
+    };
+
+    it('Valid initial value => no dispatch of InputEvent', () => {
+        cy.mount(TestInput, {
+            componentProperties: {
+                initialValue: '123',
+                maskitoOptions,
+                input: createOutputSpy('inputEvent'),
+            },
+        });
+
+        cy.get('input').should('have.value', '123');
+        cy.get('@inputEvent').should('not.be.called');
+    });
+
+    it('Invalid initial value => dispatch of InputEvent', () => {
+        cy.mount(TestInput, {
+            componentProperties: {
+                initialValue: '4abc56',
+                maskitoOptions,
+                input: createOutputSpy('inputEvent'),
+            },
+        });
+
+        cy.get('input').should('have.value', '456');
+        cy.get('@inputEvent').should('have.callCount', 1);
+    });
+});
diff --git a/projects/demo-integrations/src/tests/component-testing/utils.ts b/projects/demo-integrations/src/tests/component-testing/utils.ts
@@ -7,12 +7,16 @@ import {MaskitoOptions} from '@maskito/core';
     imports: [MaskitoDirective],
     template: `
         <input
+            [attr.value]="initialValue"
             [maskito]="maskitoOptions"
             (input)="input.emit($event)"
         />
     `,
 })
 export class TestInput {
+    @Input()
+    initialValue = '';
+
     @Input()
     maskitoOptions: MaskitoOptions | null = null;
 

diff --git a/projects/kit/src/lib/masks/number/plugins/leading-zeroes-validation.plugin.ts b/projects/kit/src/lib/masks/number/plugins/leading-zeroes-validation.plugin.ts
@@ -39,9 +39,7 @@ export function createLeadingZeroesValidationPlugin({
                 {value: '', selection: DUMMY_SELECTION},
             ).value;
 
-            if (element.value !== newValue) {
-                maskitoUpdateElement(element, newValue);
-            }
+            maskitoUpdateElement(element, newValue);
         },
         {capture: true},
     );

diff --git a/projects/kit/src/lib/masks/number/plugins/not-empty-integer.plugin.ts b/projects/kit/src/lib/masks/number/plugins/not-empty-integer.plugin.ts
@@ -32,9 +32,7 @@ export function createNotEmptyIntegerPlugin({
                 ) +
                 extractedPostfix;
 
-            if (newValue !== element.value) {
-                maskitoUpdateElement(element, newValue);
-            }
+            maskitoUpdateElement(element, newValue);
         },
         {capture: true},
     );