Drawer: ScrollView doesn't scroll if you change the Drawer's position and openedStateMode options (T1255272) (DevExpress#28739)

Author: EugeniyKiyashko

packages/devextreme/js/__internal/ui/drawer/m_drawer.ts

@@ -11,12 +11,12 @@ import { extend } from '@js/core/utils/extend';
 import { getBoundingRect } from '@js/core/utils/position';
 import { isDefined, isFunction } from '@js/core/utils/type';
 import { hasWindow } from '@js/core/utils/window';
+import type { PanelLocation } from '@js/ui/drawer';
 import Widget from '@js/ui/widget/ui.widget';
-
-import { animation } from './m_drawer.animation';
-import OverlapStrategy from './m_drawer.rendering.strategy.overlap';
-import PushStrategy from './m_drawer.rendering.strategy.push';
-import ShrinkStrategy from './m_drawer.rendering.strategy.shrink';
+import { animation } from '@ts/ui/drawer/m_drawer.animation';
+import OverlapStrategy from '@ts/ui/drawer/m_drawer.rendering.strategy.overlap';
+import PushStrategy from '@ts/ui/drawer/m_drawer.rendering.strategy.push';
+import ShrinkStrategy from '@ts/ui/drawer/m_drawer.rendering.strategy.shrink';
 
 const DRAWER_CLASS = 'dx-drawer';
 const DRAWER_WRAPPER_CLASS = 'dx-drawer-wrapper';
@@ -216,12 +216,13 @@ const Drawer = (Widget as any).inherit({
     this.$element().addClass(`${DRAWER_CLASS}-${this.option('openedStateMode')}`);
   },
 
-  _refreshPositionClass(prevPosition) {
-    if (prevPosition) {
-      this.$element().removeClass(`${DRAWER_CLASS}-${prevPosition}`);
-    }
+  _refreshPositionClass(): void {
+    const positions = ['left', 'right', 'top', 'bottom'];
+    const classPrefix = `${DRAWER_CLASS}-`;
 
-    this.$element().addClass(`${DRAWER_CLASS}-${this.calcTargetPosition()}`);
+    this.$element()
+      .removeClass(positions.map((position) => `${classPrefix}${position}`).join(' '))
+      .addClass(`${classPrefix}${this.calcTargetPosition()}`);
   },
 
   _refreshWrapperChildrenOrder() {
@@ -279,17 +280,18 @@ const Drawer = (Widget as any).inherit({
     this._minSize = this.option('minSize') || 0;
   },
 
-  calcTargetPosition() {
-    const position = this.option('position');
-    const rtl = this.option('rtlEnabled');
-    let result = position;
+  calcTargetPosition(): PanelLocation {
+    const { position, rtlEnabled } = this.option();
 
     if (position === 'before') {
-      result = rtl ? 'right' : 'left';
-    } else if (position === 'after') {
-      result = rtl ? 'left' : 'right';
+      return rtlEnabled ? 'right' : 'left';
     }
-    return result;
+
+    if (position === 'after') {
+      return rtlEnabled ? 'left' : 'right';
+    }
+
+    return position;
   },
 
   getOverlayTarget() {
@@ -511,7 +513,7 @@ const Drawer = (Widget as any).inherit({
         this._togglePanelContentHiddenClass();
         break;
       case 'position':
-        this._refreshPositionClass(args.previousValue);
+        this._refreshPositionClass();
         this._refreshWrapperChildrenOrder();
         this._invalidate();
         break;

packages/devextreme/testing/tests/DevExpress.ui.widgets/drawer.markup.tests.js

@@ -179,6 +179,61 @@ QUnit.module('rendering', () => {
         assert.ok($element.hasClass(DRAWER_CLASS + '-top'), 'top panel position class added');
     });
 
+    [true, false].forEach((rtlEnabled) => {
+        const panelPositions = ['top', 'bottom', 'left', 'right', 'before', 'after'];
+
+        const configs = [
+            { panelPosition: 'top', expectedClass: `${DRAWER_CLASS}-top` },
+            { panelPosition: 'bottom', expectedClass: `${DRAWER_CLASS}-bottom` },
+            { panelPosition: 'left', expectedClass: `${DRAWER_CLASS}-left` },
+            { panelPosition: 'right', expectedClass: `${DRAWER_CLASS}-right` },
+            { panelPosition: 'before', expectedClass: rtlEnabled ? `${DRAWER_CLASS}-right` : `${DRAWER_CLASS}-left` },
+            { panelPosition: 'after', expectedClass: rtlEnabled ? `${DRAWER_CLASS}-left` : `${DRAWER_CLASS}-right` },
+        ];
+
+        configs.forEach(({ panelPosition, expectedClass }) => {
+            QUnit.test(`drawer should have ${expectedClass} class on initialization if panel position is set to ${panelPosition}, rtlEnabled=${rtlEnabled}`, function(assert) {
+                assert.expect(6);
+
+                const $element = $('#contentTemplate').dxDrawer({
+                    position: panelPosition,
+                    opened: true,
+                    rtlEnabled,
+                });
+
+                assert.strictEqual($element.hasClass(expectedClass), true, `class ${expectedClass} is added correctly`);
+
+                panelPositions
+                    .filter((position) => `${DRAWER_CLASS}-${position}` !== expectedClass)
+                    .map((position) => {
+                        assert.strictEqual($element.hasClass(`${DRAWER_CLASS}-${position}`), false, `class ${DRAWER_CLASS}-${position} is not set`);
+                    });
+            });
+
+            configs.forEach(({ panelPosition: newPanelPosition, expectedClass: expectedClassAfterChange }) => {
+                QUnit.test(`ddrawer should have ${expectedClassAfterChange} class after changing position from ${panelPosition} to ${newPanelPosition}, rtlEnabled=${rtlEnabled}`, function(assert) {
+                    const drawer = $('#contentTemplate').dxDrawer({
+                        position: panelPosition,
+                        opened: true,
+                        rtlEnabled,
+                    }).dxDrawer('instance');
+
+                    const $element = drawer.$element();
+
+                    drawer.option('position', newPanelPosition);
+
+                    assert.strictEqual($element.hasClass(expectedClassAfterChange), true, `class ${expectedClassAfterChange} is added correctly`);
+
+                    panelPositions
+                        .filter((position) => `${DRAWER_CLASS}-${position}` !== expectedClassAfterChange)
+                        .map((position) => {
+                            assert.strictEqual($element.hasClass(`${DRAWER_CLASS}-${position}`), false, `class ${DRAWER_CLASS}-${position} is not set`);
+                        });
+                });
+            });
+        });
+    });
+
     QUnit.test('shader should be rendered by default if panel is visible', function(assert) {
         const $element = $('#drawer').dxDrawer({
             opened: true