Popup: Replace detach with remove on toolbar element (T1305512) (#30964)

Co-authored-by: marker dao ® <[email protected]>

Author: marker-dao

packages/devextreme/js/__internal/ui/popup/m_popup.ts

@@ -520,7 +520,8 @@ class Popup<
 
       this._$topToolbar?.toggleClass(POPUP_HAS_CLOSE_BUTTON_CLASS, this._hasCloseButton());
     } else {
-      this._$topToolbar?.detach();
+      this._$topToolbar?.remove();
+      this._$topToolbar = undefined;
     }
 
     this._toggleAriaLabel();
@@ -556,7 +557,8 @@ class Popup<
     const items = this._getToolbarItems('bottom');
 
     if (!items.length) {
-      this._$bottomToolbar?.detach();
+      this._$bottomToolbar?.remove();
+      this._$bottomToolbar = undefined;
       return;
     }
 

packages/devextreme/testing/tests/DevExpress.ui.widgets/popup.tests.js

@@ -136,6 +136,7 @@ const POPUP_CONTENT_INHERIT_HEIGHT_CLASS = 'dx-popup-inherit-height';
 const POPUP_BOTTOM_RIGHT_RESIZE_HANDLE_CLASS = 'dx-resizable-handle-corner-bottom-right';
 const POPUP_TOP_LEFT_RESIZE_HANDLE_CLASS = 'dx-resizable-handle-corner-top-left';
 const DISABLED_STATE_CLASS = 'dx-state-disabled';
+const TOOLBAR_ITEM_CONTENT_CLASS = 'dx-toolbar-item-content';
 
 const POPUP_DRAGGABLE_CLASS = 'dx-popup-draggable';
 
@@ -2722,7 +2723,6 @@ QUnit.module('rendering', {
         });
     });
 
-
     QUnit.test('dx-popup-fullscreen-width class should be attached when width is equal to screen width', function(assert) {
         this.instance.option('width', function() { return getWidth($(window)); });
         this.instance.show();
@@ -2748,6 +2748,39 @@ QUnit.module('rendering', {
         assert.ok($('.' + POPUP_BOTTOM_CLASS).dxToolbar('instance').option('compactMode'), 'bottom toolbar has the compact option');
     });
 
+    ['top', 'bottom'].forEach((position) => {
+        QUnit.test(`${position} toolbar should be rendered correctly after clearing the toolbarItems (T1305512)`, function(assert) {
+            const popup = $('#popup').dxPopup({
+                showCloseButton: false,
+                showTitle: false,
+            }).dxPopup('instance');
+
+            popup.option({
+                toolbarItems: [
+                    {
+                        text: 'first',
+                        toolbar: position,
+                    },
+                ],
+            });
+            popup.option({ toolbarItems: [] });
+            popup.option({
+                toolbarItems: [
+                    {
+                        text: 'second',
+                        toolbar: position,
+                    },
+                ],
+            });
+
+            popup.show();
+
+            const $toolbarItemContent = popup.$wrapper().find(`.${TOOLBAR_ITEM_CONTENT_CLASS}`);
+
+            assert.strictEqual($toolbarItemContent.text(), 'second', 'toolbar with the correct element rendered after toolbarItems cleaning');
+        });
+    });
+
     QUnit.test('dx-popup-content-scrollable class should be attached when preventScrollEvents is used', function(assert) {
         this.instance.show();