TextBox: correct handlers order after change mask option (T1214019) (#…

…26726) Co-authored-by: Alexander Bulychev <git@bulychev.net>
DevExpress · Feb 21, 2024 · ea65741 · ea65741
1 parent 655fbe2
commit ea65741
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 3 deletions.
diff --git a/packages/devextreme/js/ui/text_box/ui.text_editor.mask.js b/packages/devextreme/js/ui/text_box/ui.text_editor.mask.js
@@ -528,6 +528,7 @@ const TextEditorMask = TextEditorBase.inherit({
         this._updateHiddenElement();
         this._renderMask();
         this._validateMask();
+        this._refreshValueChangeEvent();
     },
 
     _processEmptyMask: function(mask) {

diff --git a/packages/devextreme/js/ui/text_box/ui.text_editor.mask.strategy.js b/packages/devextreme/js/ui/text_box/ui.text_editor.mask.strategy.js
@@ -256,6 +256,11 @@ export default class MaskStrategy {
         clearTimeout(this._dragTimer);
     }
 
+    _clearTimers() {
+        this._clearDragTimer();
+        clearTimeout(this._caretTimeout);
+        clearTimeout(this._inputHandlerTimer);
+    }
 
     getHandler(handlerName) {
         return (args) => {
@@ -275,12 +280,11 @@ export default class MaskStrategy {
     }
 
     detachEvents() {
+        this._clearTimers();
         EventsEngine.off(this._editorInput(), `.${MASK_EVENT_NAMESPACE}`);
     }
 
     clean() {
-        this._clearDragTimer();
-        clearTimeout(this._caretTimeout);
-        clearTimeout(this._inputHandlerTimer);
+        this._clearTimers();
     }
 }
diff --git a/...ages/devextreme/testing/tests/DevExpress.ui.widgets.editors/textEditorParts/mask.tests.js b/...ages/devextreme/testing/tests/DevExpress.ui.widgets.editors/textEditorParts/mask.tests.js
@@ -2625,6 +2625,36 @@ QUnit.module('Hidden input', {}, () => {
         assert.equal($hiddenInput.attr('name'), 'Editor with mask', 'name of hidden input');
     });
 
+    QUnit.test('Value change should work as usual after mask option is updated programmatically (T1214019)', function(assert) {
+        const $textEditor = $('#texteditor').dxTextEditor({
+            valueChangeEvent: 'input',
+            mask: '000',
+        });
+        const $input = $textEditor.find(`.${TEXTEDITOR_INPUT_CLASS}`);
+        const instance = $textEditor.dxTextEditor('instance');
+
+        keyboardMock($input, true)
+            .caret(0)
+            .type('1')
+            .change();
+
+        $textEditor.blur();
+        instance.option('mask', '0000');
+        keyboardMock($input, true)
+            .caret(1)
+            .type('2')
+            .change();
+
+        $textEditor.blur();
+        instance.option('mask', '000');
+
+        const $hiddenInput = $textEditor.find('input[type=hidden]');
+
+        assert.strictEqual($input.val(), '12_', 'Value is saved');
+        assert.strictEqual($hiddenInput.val(), '12', 'Hidden value is saved');
+        assert.strictEqual(instance.option('value'), '12', 'Value option is correct');
+    });
+
     [
         { useMaskedValue: true, value: '12-34-' },
         { useMaskedValue: false, value: '1234' }