Popup: Move triggering of resize before animation

Author: marker-dao

e2e/testcafe-devextreme/tests/editors/overlays/toolbarIntegration.ts

@@ -216,7 +216,7 @@ safeSizeTest('Popup toolbars with wide elements and overflow menu if hidden on i
   ...baseConfiguration,
   toolbarItems: [],
   visible: false,
-}, undefined, { disableFxAnimation: true }));
+}, undefined, { disableFxAnimation: false }));
 
 safeSizeTest('Popup toolbars with wide elements and overflow menu if shown on init with toolbar items', async (t) => {
   const { takeScreenshot, compareResults } = createScreenshotsComparer(t);

packages/devextreme/js/__internal/ui/overlay/m_overlay.ts

@@ -687,7 +687,6 @@ class Overlay<
     }
 
     this._currentVisible = visible;
-
     this._stopAnimation();
 
     if (!visible) {
@@ -707,8 +706,8 @@ class Overlay<
       this._updateZIndexStackPosition(visible);
       this._moveFromContainer();
     }
-    this._toggleShading(visible);
 
+    this._toggleShading(visible);
     this._toggleSubscriptions(visible);
   }
 

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

@@ -505,7 +505,7 @@ class Popup<
       } else {
         this._renderTopToolbarImpl();
       }
-      this._triggerToolbarResizeEvent();
+
       this._$topToolbar?.toggleClass(POPUP_HAS_CLOSE_BUTTON_CLASS, this._hasCloseButton());
     } else {
       this._$topToolbar?.detach();
@@ -553,7 +553,7 @@ class Popup<
     } else {
       this._renderBottomToolbarImpl();
     }
-    this._triggerToolbarResizeEvent();
+
     this._toggleClasses();
   }
 
@@ -582,10 +582,13 @@ class Popup<
   }
 
   _triggerToolbarResizeEvent(): void {
-    // To trigger toolbar width set in initial rendering to set menu button width (T1245421)
-    // And to trigger with animation in runtime items update
-    triggerResizeEvent(this.$overlayContent());
-    triggerResizeEvent(this.$overlayContent());
+    // To trigger toolbar width to set overflow menu button width (T1245421)
+    [this._$topToolbar, this._$bottomToolbar].forEach(($toolbar) => {
+      if ($toolbar) {
+        triggerResizeEvent($toolbar);
+        triggerResizeEvent($toolbar);
+      }
+    });
   }
 
   _renderToolbar(
@@ -679,6 +682,11 @@ class Popup<
     this.$overlayContent().attr('aria-labelledby', titleId);
   }
 
+  _animateShowing(): void {
+    this._triggerToolbarResizeEvent();
+    super._animateShowing();
+  }
+
   _renderVisibilityAnimate(visible: boolean): DeferredObj<unknown> | Promise<unknown> {
     return super._renderVisibilityAnimate(visible);
   }

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

@@ -1509,7 +1509,7 @@ QUnit.module('options changed callbacks', {
             const topToolbar = this.instance.topToolbar();
 
             assert.strictEqual(topToolbar.length, 1, 'top toolbar is rendered');
-            // 1st and 2nd from toolbar rendering on init, 3rd from overlay visibility changing
+            // 1st from overlay visibility changing, 2nd and 3rd from _animateShowing
             assert.strictEqual(this.resizeEventSpy.callCount, 3, 'event is triggered 3 times');
         });
 
@@ -1524,7 +1524,7 @@ QUnit.module('options changed callbacks', {
             const topToolbar = this.instance.topToolbar();
 
             assert.strictEqual(topToolbar.length, 1, 'top toolbar is rendered');
-            // 1st and 2nd from toolbar rendering on init, 3rd from overlay visibility changing
+            // 1st from overlay visibility changing, 2nd and 3rd from _animateShowing
             assert.strictEqual(this.resizeEventSpy.callCount, 3, 'event is triggered 3 times');
         });
 
@@ -1540,8 +1540,8 @@ QUnit.module('options changed callbacks', {
             this.instance.option({ toolbarItems: [{ text: 'text' }] });
 
             assert.strictEqual(getTopToolbar().length, 1, 'top toolbar is rendered');
-            // 2, 3 from top toolbar rendering, 4, 5 from optionChanged
-            assert.strictEqual(this.resizeEventSpy.callCount, 5, 'event is triggered 5 times');
+            // 2nd and 3rd from optionChanged
+            assert.strictEqual(this.resizeEventSpy.callCount, 3, 'event is triggered 3 times');
         });
 
         QUnit.test('toolbarItems runtime changing should trigger resize event if toolbar is rendered on init', function(assert) {
@@ -1559,10 +1559,57 @@ QUnit.module('options changed callbacks', {
             const $toolbar2 = getTopToolbar();
 
             assert.strictEqual($toolbar2.length, 1, 'top toolbar is rendered');
-            assert.strictEqual(this.resizeEventSpy.callCount, 7, 'event is triggered additional times');
+            assert.strictEqual(this.resizeEventSpy.callCount, 5, 'event is triggered additional times');
 
             assert.strictEqual($toolbar1, $toolbar2, 'toolbar is not rendered twice after toolbarItems update in runtime');
         });
+
+        QUnit.test('resize event is triggered during animation showing when toolbar is present', function(assert) {
+            this.resizeEventSpy.resetHistory();
+            this.reinit({
+                visible: false,
+                showTitle: true,
+                showCloseButton: true,
+            });
+            const beforeShow = this.resizeEventSpy.callCount;
+
+            this.instance.show();
+
+            const topToolbar = this.instance.topToolbar();
+
+            assert.strictEqual(beforeShow, 0, 'event is not triggered when popup is hidden');
+            assert.strictEqual(topToolbar.length, 1, 'top toolbar is rendered');
+            // 1st from overlay visibility changing, 2nd and 3rd from _animateShowing
+            assert.strictEqual(this.resizeEventSpy.callCount, 3, 'event is triggered 3 times during show animation');
+        });
+
+        QUnit.test('additional resize events are triggered only on toolbar elements', function(assert) {
+            this.resizeEventSpy.resetHistory();
+            this.reinit({
+                visible: true,
+                showTitle: true,
+                showCloseButton: true,
+                toolbarItems: [
+                    {
+                        text: 'bottom text',
+                        toolbar: 'bottom',
+                        location: 'center',
+                    },
+                ],
+            });
+
+            const topToolbar = this.instance.topToolbar();
+            const bottomToolbar = this.instance.bottomToolbar();
+            const overlayContent = this.instance.$overlayContent();
+
+            const callsForTopToolbar = this.resizeEventSpy.getCalls().filter(call => call.args[0] && call.args[0][0] === topToolbar[0]);
+            const callsForBottomToolbar = this.resizeEventSpy.getCalls().filter(call => call.args[0] && call.args[0][0] === bottomToolbar[0]);
+            const callsForOverlayContent = this.resizeEventSpy.getCalls().filter(call => call.args[0] && call.args[0][0] === overlayContent[0]);
+
+            assert.strictEqual(callsForTopToolbar.length, 2, 'additional resize events are triggered on top toolbar');
+            assert.strictEqual(callsForBottomToolbar.length, 2, 'additional resize events are triggered on bottom toolbar');
+            assert.strictEqual(callsForOverlayContent.length, 1, 'resize event is triggered on overlay content for geometry rendering');
+        });
     });
 
     QUnit.test('titleTemplate option change should trigger resize event for content correct geometry rendering', function(assert) {