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 index 82be323c546d..7afed38dff0b 100644 --- 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 index fe7db0b9f8b0..e322b9e47f56 100644 --- 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/packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/textEditorParts/mask.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/textEditorParts/mask.tests.js index 233cec6e102f..7b3ddc0d394a 100644 --- a/packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/textEditorParts/mask.tests.js +++ b/packages/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' }