Drawer: Fix component open animation (T1239845)

DevExpress · Jul 4, 2024 · be545b6 · be545b6
1 parent 74693b1
commit be545b6
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 11 deletions.
diff --git a/packages/devextreme/js/__internal/ui/drawer/m_drawer.ts b/packages/devextreme/js/__internal/ui/drawer/m_drawer.ts
@@ -175,7 +175,7 @@ const Drawer = (Widget as any).inherit({
       this._$panelContentWrapper.toggleClass(DRAWER_PANEL_CONTENT_HIDDEN_CLASS, shouldBeSet);
     };
 
-    if (this._whenAnimationCompleted) {
+    if (this._whenAnimationCompleted && !this.option('opened')) {
       when(this._whenAnimationCompleted).done(callback);
     } else {
       callback();

diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets/drawer.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets/drawer.tests.js
@@ -161,19 +161,21 @@ QUnit.module('Drawer behavior', () => {
         assert.equal(count, 0, 'callback not fired at animation start');
     });
 
-    QUnit.test('drawer panel should have dx-drawer-panel-content-hidden class before it was shown', function(assert) {
-        const $element = $('#drawer').dxDrawer({ animationDuration: 0 });
-        const instance = $element.dxDrawer('instance');
-        const $panel = $element.find(`.${DRAWER_PANEL_CONTENT_CLASS}`);
+    [true, false].forEach(opened => {
+        QUnit.test(`drawer panel should ${opened ? '' : 'not'} have a hidden class before it was ${opened ? 'closed' : 'shown'} (T1239845)`, function(assert) {
+            const $element = $('#drawer').dxDrawer({ animationDuration: 0, opened });
+            const instance = $element.dxDrawer('instance');
+            const $panel = $element.find(`.${DRAWER_PANEL_CONTENT_CLASS}`);
 
-        const done = assert.async();
+            const done = assert.async();
 
-        instance.toggle().then(() => {
-            assert.strictEqual($panel.hasClass(DRAWER_PANEL_CONTENT_HIDDEN_CLASS), false, 'dx-drawer-panel-content-hidden is not set');
-            done();
-        });
+            instance.toggle().then(() => {
+                assert.strictEqual($panel.hasClass(DRAWER_PANEL_CONTENT_HIDDEN_CLASS), opened, 'dx-drawer-panel-content-hidden is not set');
+                done();
+            });
 
-        assert.strictEqual($panel.hasClass(DRAWER_PANEL_CONTENT_HIDDEN_CLASS), true, 'dx-drawer-panel-content-hidden is set');
+            assert.strictEqual($panel.hasClass(DRAWER_PANEL_CONTENT_HIDDEN_CLASS), false, 'dx-drawer-panel-content-hidden is set');
+        });
     });
 
     QUnit.test('Check dxresize event: opened:false,animationEnabled:true -> drawer.toggle()', function(assert) {