DropDownEditor: Detach focus events before attaching new ones (T1238121)

DevExpress · Dec 17, 2024 · 02eafa8 · 02eafa8
1 parent 98b2a9d
commit 02eafa8
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 3 deletions.
diff --git a/packages/devextreme/js/__internal/ui/drop_down_editor/m_drop_down_editor.ts b/packages/devextreme/js/__internal/ui/drop_down_editor/m_drop_down_editor.ts
@@ -216,6 +216,8 @@ const DropDownEditor = TextBox.inherit({
   },
 
   _render() {
+    this._detachFocusEvents();
+
     this.callBase();
 
     this._renderOpenHandler();
@@ -291,7 +293,9 @@ const DropDownEditor = TextBox.inherit({
   _renderField() {
     const fieldTemplate = this._getFieldTemplate();
 
-    fieldTemplate && this._renderTemplatedField(fieldTemplate, this._fieldRenderData());
+    if (fieldTemplate) {
+      this._renderTemplatedField(fieldTemplate, this._fieldRenderData());
+    }
   },
 
   _renderPlaceholder() {

diff --git a/packages/devextreme/js/__internal/ui/text_box/m_text_editor.base.ts b/packages/devextreme/js/__internal/ui/text_box/m_text_editor.base.ts
@@ -184,13 +184,11 @@ const TextEditorBase = Editor.inherit({
     this._renderStylingMode();
     this._renderInputType();
     this._renderPlaceholder();
-
     this._renderProps();
 
     this.callBase();
 
     this._renderValue();
-
     this._renderLabel();
   },
 

diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/dropDownEditor.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/dropDownEditor.tests.js
@@ -457,6 +457,29 @@ QUnit.module('focus policy', () => {
         assert.ok($dropDownEditor.hasClass('dx-state-focused'), 'Widget is focused after click on clearButton');
     });
 
+    [
+        { eventName: 'onFocusIn', scenario: 'focus' },
+        { eventName: 'onFocusOut', scenario: 'blur ' },
+    ].forEach(({ eventName, scenario }) => {
+        QUnit.test(`${eventName} should be called only once on component ${scenario} when fieldTemplate is specified (T1238121)`, function(assert) {
+            const eventStub = sinon.stub();
+
+            const dropDownEditor = $('#dropDownEditorLazy').dxDropDownEditor({
+                [eventName]: eventStub,
+                fieldTemplate(_, container) {
+                    $('<div>').dxTextBox({
+                        readOnly: true,
+                    }).appendTo(container);
+                },
+            }).dxDropDownEditor('instance');
+
+            dropDownEditor.focus();
+            dropDownEditor.blur();
+
+            assert.strictEqual(eventStub.callCount, 1, `${eventName} called once`);
+        });
+    });
+
     QUnit.testInActiveWindow('input is focused by click on dropDownButton', function(assert) {
         const $dropDownEditor = $('#dropDownEditorLazy').dxDropDownEditor({
             focusStateEnabled: true