separate user error case from detached template case

DevExpress · Sep 6, 2023 · c7105e2 · c7105e2
1 parent 8df5a27
commit c7105e2
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 10 deletions.
diff --git a/packages/devextreme-react/src/core/template-wrapper.ts b/packages/devextreme-react/src/core/template-wrapper.ts
@@ -28,9 +28,9 @@ enum TableNodeNames {
 class TemplateWrapper extends React.PureComponent<ITemplateWrapperProps, ITemplateWrapperState> {
   private readonly _removalListenerRef = React.createRef<HTMLElement>();
 
-  private element: Node | undefined | null;
+  private element: HTMLElement | undefined | null;
 
-  private hiddenElement: Node | undefined | null;
+  private hiddenElement: HTMLElement | undefined | null;
 
   constructor(props: ITemplateWrapperProps) {
     super(props);
@@ -73,7 +73,7 @@ class TemplateWrapper extends React.PureComponent<ITemplateWrapperProps, ITempla
 
   private getPreviousSiblingNode(node: HTMLDivElement | null) {
     this.hiddenElement = node;
-    this.element = node?.previousSibling;
+    this.element = node?.previousSibling as HTMLElement;
   }
 
   private _subscribeOnRemove() {

diff --git a/packages/devextreme/js/ui/drop_down_editor/ui.drop_down_editor.js b/packages/devextreme/js/ui/drop_down_editor/ui.drop_down_editor.js
@@ -353,16 +353,18 @@ const DropDownEditor = TextBox.inherit({
             model: data,
             container: $templateContainer,
             onRendered: () => {
-                if($templateContainer.closest('body') === null) {
-                    return;
-                }
-
-                const $input = this._input();
+                const $input = this._input($templateContainer);
 
                 if(!$input.length) {
                     throw errors.Error('E1010');
                 }
 
+                const renderedInRoot = !!this.$element().find($templateContainer).length;
+
+                if(!renderedInRoot) {
+                    return;
+                }
+
                 this._integrateInput();
                 isFocused && eventsEngine.trigger($input, 'focus');
             }

diff --git a/packages/devextreme/js/ui/text_box/ui.text_editor.base.js b/packages/devextreme/js/ui/text_box/ui.text_editor.base.js
@@ -165,8 +165,10 @@ const TextEditorBase = Editor.inherit({
         return this.option('showClearButton') && !this.option('readOnly');
     },
 
-    _input: function() {
-        return this.$element().find(TEXTEDITOR_INPUT_SELECTOR).first();
+    _input: function(parentElement) {
+        parentElement = parentElement ?? this.$element();
+
+        return parentElement.find(TEXTEDITOR_INPUT_SELECTOR).first();
     },
 
     _isFocused: function() {

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
@@ -946,6 +946,41 @@ QUnit.module('Templates', () => {
         }
     });
 
+    QUnit.test('should not raise error if onRendered is received for a removed template (T1178295)', function(assert) {
+        const clock = sinon.useFakeTimers();
+
+        $('#dropDownEditorLazy').dxDropDownEditor({
+            fieldTemplate: 'field',
+            templatesRenderAsynchronously: true,
+            integrationOptions: {
+                templates: {
+                    field: {
+                        render: function({ container, onRendered }) {
+                            const $input = $('<div>').appendTo(container);
+
+                            setTimeout(() => {
+                                $input.dxTextBox();
+                                onRendered();
+                                container.remove();
+                                onRendered();
+                            });
+                        }
+                    }
+                }
+            },
+        });
+
+        try {
+            clock.tick(10);
+        } catch(e) {
+            assert.ok(false, `error is raised: ${e.message}`);
+        } finally {
+            clock.tick(10);
+            clock.restore();
+            assert.ok(true);
+        }
+    });
+
     QUnit.test('onValueChanged should be fired for each change by keyboard when fieldTemplate is used', function(assert) {
         const valueChangedSpy = sinon.spy();