TextBox: input should not remove excess characters in front when mask is applied (T1237175) (#29381)

Author: ksercs

packages/devextreme/js/__internal/ui/text_box/m_text_editor.mask.strategy.ts

@@ -109,7 +109,7 @@ export default class MaskStrategy {
   }
 
   _handleBackwardDeleteInputEvent() {
-    this._clearSelectedText();
+    this._clearSelectedText(true);
 
     const caret = this._editorCaret();
     this.editor.setForwardDirection();
@@ -122,9 +122,10 @@ export default class MaskStrategy {
     }
   }
 
-  _clearSelectedText() {
-    // eslint-disable-next-line no-unsafe-optional-chaining
-    const length = (this._prevCaret?.end - this._prevCaret?.start) || 1;
+  _clearSelectedText(isDeleteInputEvent?: boolean): void {
+    const selectionLength = this._prevCaret && (this._prevCaret.end - this._prevCaret.start);
+    const length = selectionLength || Number(isDeleteInputEvent);
+
     const caret = this._editorCaret();
 
     if (!this._isAutoFill()) {

packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/textEditorParts/mask.tests.js

@@ -715,6 +715,23 @@ QUnit.module('typing', moduleConfig, () => {
 
         assert.deepEqual(keyboard.caret(), { start: 4, end: 4 }, 'caret position is correct');
     });
+
+    QUnit.test('does not remove extra characters in front (T1237175)', function(assert) {
+        const $textEditor = $('#texteditor').dxTextEditor({
+            mask: '000',
+            value: '123'
+        });
+
+        const $input = $textEditor.find(`.${TEXTEDITOR_INPUT_CLASS}`);
+        const keyboard = keyboardMock($input, true);
+
+        keyboard
+            .caret(0)
+            .type('9');
+
+        assert.strictEqual($input.val(), '923', 'only replaced character is removed');
+        assert.deepEqual(keyboard.caret(), { start: 1, end: 1 }, 'caret position is correct');
+    });
 });
 
 QUnit.module('backspace key', moduleConfig, () => {