Lookup: fix drop down position in chrome on android (T1165271) (#24756)

Co-authored-by: Shpileva Yuliya <[email protected]>
DevExpress · May 26, 2023 · a02b773 · a02b773
1 parent f2a8476
commit a02b773
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 2 deletions.
diff --git a/js/ui/lookup.js b/js/ui/lookup.js
@@ -45,6 +45,7 @@ const GROUP_LIST_HEADER_CLASS = 'dx-list-group-header';
 
 const MATERIAL_LOOKUP_LIST_ITEMS_COUNT = 5;
 const MATERIAL_LOOKUP_LIST_PADDING = 8;
+const WINDOW_RATIO = 0.8;
 
 
 const Lookup = DropDownList.inherit({
@@ -61,6 +62,16 @@ const Lookup = DropDownList.inherit({
     },
 
     _getDefaultOptions: function() {
+        const getSize = (side) => {
+            let size;
+            if(devices.real().deviceType === 'phone' && window.visualViewport) {
+                size = window.visualViewport[side];
+            } else {
+                size = side === 'width' ? getWidth(window) : getHeight(window);
+            }
+            return size * WINDOW_RATIO;
+        };
+
         return extend(this.callBase(), {
             placeholder: messageLocalization.format('Select'),
 
@@ -129,9 +140,13 @@ const Lookup = DropDownList.inherit({
             dropDownOptions: {
                 showTitle: true,
 
-                width: function() { return getWidth(window) * 0.8; },
+                width: function() {
+                    return getSize('width');
+                },
 
-                height: function() { return getHeight(window) * 0.8; },
+                height: function() {
+                    return getSize('height');
+                },
 
                 shading: true,
 

diff --git a/testing/tests/DevExpress.ui.widgets.editors/lookup.tests.js b/testing/tests/DevExpress.ui.widgets.editors/lookup.tests.js
@@ -82,6 +82,8 @@ const SCROLL_VIEW_LOAD_PANEL_CLASS = 'dx-scrollview-loadpanel';
 
 const FOCUSED_CLASS = 'dx-state-focused';
 
+const WINDOW_RATIO = 0.8;
+
 const toSelector = function(val) {
     return '.' + val;
 };
@@ -1543,6 +1545,28 @@ QUnit.module('options', {
         assert.equal(autoValue, initialValue, 'initial value equal auto value');
     });
 
+    QUnit.test('popup height should have correct size on mobile devices', function(assert) {
+        if(devices.real().deviceType !== 'phone') {
+            assert.ok(true, 'not mobile device');
+            return;
+        }
+        const initialVisualViewport = window.visualViewport;
+
+        try {
+            window.visualViewport = { height: 510, width: 405 };
+            const $lookup = $('#lookup');
+            const instance = $lookup.dxLookup({}).dxLookup('instance');
+
+            instance.open();
+            const popup = $lookup.find(`.${POPUP_CLASS}`).dxPopup('instance');
+
+            assert.equal(popup.option('height')(), 510 * WINDOW_RATIO);
+            assert.equal(popup.option('width')(), 405 * WINDOW_RATIO);
+        } finally {
+            window.visualViewport = initialVisualViewport;
+        }
+    });
+
     QUnit.test('searchPlaceholder', function(assert) {
         const instance = $('#lookup').dxLookup({
             dataSource: [1, 2, 3],