Fix DropDownEditor Popup position depending the "rtlEnabled" option value (T856114)

js/core/utils/position.js

@@ -1,7 +1,7 @@
-const config = require('../config');
+import config from '../config';
 
 const getDefaultAlignment = function(isRtlEnabled) {
-    const rtlEnabled = isRtlEnabled || config().rtlEnabled;
+    const rtlEnabled = isRtlEnabled ?? config().rtlEnabled;
 
     return rtlEnabled ? 'right' : 'left';
 };

js/ui/drop_down_editor/ui.drop_down_editor.js

@@ -180,8 +180,8 @@ const DropDownEditor = TextBox.inherit({
         });
     },
 
-    _getDefaultPopupPosition: function() {
-        const position = getDefaultAlignment();
+    _getDefaultPopupPosition: function(isRtlEnabled) {
+        const position = getDefaultAlignment(isRtlEnabled);
 
         return {
             offset: { h: 0, v: -1 },
@@ -213,9 +213,17 @@ const DropDownEditor = TextBox.inherit({
         this.callBase();
         this._initVisibilityActions();
         this._initPopupInitializedAction();
+        this._updatePopupPosition(this.option('rtlEnabled'));
         this._options.cache('dropDownOptions', this.option('dropDownOptions'));
     },
 
+    _updatePopupPosition: function(isRtlEnabled) {
+        const { my, at } = this._getDefaultPopupPosition(isRtlEnabled);
+        const currentPosition = this.option('popupPosition');
+
+        this.option('popupPosition', extend({}, currentPosition, { my, at }));
+    },
+
     _initVisibilityActions: function() {
         this._openAction = this._createActionByOption('onOpened', {
             excludeValidators: ['disabled', 'readOnly']
@@ -807,6 +815,10 @@ const DropDownEditor = TextBox.inherit({
 
                 this._renderSubmitElement();
                 break;
+            case 'rtlEnabled':
+                this._updatePopupPosition(args.value);
+                this.callBase(args);
+                break;
             default:
                 this.callBase(args);
         }

testing/tests/DevExpress.core/utils.position.tests.js

@@ -0,0 +1,31 @@
+import config from 'core/config';
+import { getDefaultAlignment } from 'core/utils/position.js';
+
+const { module: testModule, test } = QUnit;
+
+testModule('getDefaultAlignment', function() {
+    test('getDefaultAlignment should return an alignment depending on the global "rtlEnabled" config or passed value', function(assert) {
+        const originalConfig = config();
+
+        try {
+            config({
+                rtlEnabled: false
+            });
+
+            assert.strictEqual(getDefaultAlignment(), 'left', '"isRtlEnabled" argument is undefined, global "rtlEnabled" config is false');
+            assert.strictEqual(getDefaultAlignment(true), 'right', '"isRtlEnabled" argument is true, global "rtlEnabled" config is false');
+            assert.strictEqual(getDefaultAlignment(false), 'left', '"isRtlEnabled" argument is false, global "rtlEnabled" config is false');
+
+            config({
+                rtlEnabled: true
+            });
+
+            assert.strictEqual(getDefaultAlignment(), 'right', '"isRtlEnabled" argument is undefined, global "rtlEnabled" config is true');
+            assert.strictEqual(getDefaultAlignment(true), 'right', '"isRtlEnabled" argument is true, global "rtlEnabled" config is true');
+            assert.strictEqual(getDefaultAlignment(false), 'left', '"isRtlEnabled" argument is false, global "rtlEnabled" config is true');
+
+        } finally {
+            config(originalConfig);
+        }
+    });
+});

testing/tests/DevExpress.ui.widgets.editors/dropDownEditor.markup.tests.js

@@ -127,3 +127,33 @@ module('aria accessibility', () => {
     });
 });
 
+
+module('option change', function() {
+    const getStartDirection = (isRtlEnabled) => isRtlEnabled ? 'right' : 'left';
+
+    [false, true].forEach((rtlEnabled) => {
+        test(`after updating of the "rtlEnabled" option to "${rtlEnabled}" Popup should update its position`, function(assert) {
+            const dropDownEditor = $('#dropDownEditorLazy').dxDropDownEditor({ rtlEnabled }).dxDropDownEditor('instance');
+            const { my: initialMyPosition, at: initialAtPosition } = dropDownEditor.option('popupPosition');
+            const initialStartDirection = getStartDirection(rtlEnabled);
+
+            assert.strictEqual(initialAtPosition, `${initialStartDirection} bottom`, 'correct initial "at" position');
+            assert.strictEqual(initialMyPosition, `${initialStartDirection} top`, 'correct initial "my" position');
+
+            dropDownEditor.option('rtlEnabled', !rtlEnabled);
+
+            const { my: newMyPosition, at: newAtPosition } = dropDownEditor.option('popupPosition');
+            const newStartDirection = getStartDirection(!rtlEnabled);
+
+            assert.strictEqual(newAtPosition, `${newStartDirection} bottom`, 'correct new "at" position');
+            assert.strictEqual(newMyPosition, `${newStartDirection} top`, 'correct new "my" position');
+
+            dropDownEditor.option('rtlEnabled', rtlEnabled);
+
+            const { my: revertedMyPosition, at: revertedAtPosition } = dropDownEditor.option('popupPosition');
+
+            assert.strictEqual(revertedAtPosition, `${initialStartDirection} bottom`, 'correct initial "at" position');
+            assert.strictEqual(revertedMyPosition, `${initialStartDirection} top`, 'correct initial "my" position');
+        });
+    });
+});