From 3fab4e712a2ee4ea1f28265f74dba824bf778e3d Mon Sep 17 00:00:00 2001
From: SergeyEzhin <sergey.ezhin@onlyoffice.com>
Date: Mon, 22 Apr 2024 20:07:46 +0300
Subject: [PATCH] [DE mobile] Correct opening of custom option in dropdown list

---
 apps/common/mobile/resources/less/common.less |  6 +++++
 .../mobile/src/controller/DropdownList.jsx    |  2 +-
 .../mobile/src/view/DropdownList.jsx          | 23 ++++++++++---------
 3 files changed, 19 insertions(+), 12 deletions(-)

diff --git a/apps/common/mobile/resources/less/common.less b/apps/common/mobile/resources/less/common.less
index 000f4db5d1..735f9d9d17 100644
--- a/apps/common/mobile/resources/less/common.less
+++ b/apps/common/mobile/resources/less/common.less
@@ -1068,6 +1068,12 @@ input[type="number"]::-webkit-inner-spin-button {
     height: 100%;
 }
 
+.dropdown-list-popup {
+    height: 260px;
+    bottom: 0;
+    top: auto;
+}
+
 .dropdown-list {
     &__placeholder  {
         opacity: 0.6;
diff --git a/apps/documenteditor/mobile/src/controller/DropdownList.jsx b/apps/documenteditor/mobile/src/controller/DropdownList.jsx
index 1fd8e98905..040bcacb4d 100644
--- a/apps/documenteditor/mobile/src/controller/DropdownList.jsx
+++ b/apps/documenteditor/mobile/src/controller/DropdownList.jsx
@@ -72,7 +72,7 @@ class DropdownListController extends Component {
 
     closeModal() {
         if(Device.isPhone) {
-            f7.sheet.close('#dropdown-list-sheet', true);
+            f7.popup.close('#dropdown-list-popup', true);
         } else {
             f7.popover.close('#dropdown-list-popover', true);
         }
diff --git a/apps/documenteditor/mobile/src/view/DropdownList.jsx b/apps/documenteditor/mobile/src/view/DropdownList.jsx
index d1126f7aa2..1b04171b38 100644
--- a/apps/documenteditor/mobile/src/view/DropdownList.jsx
+++ b/apps/documenteditor/mobile/src/view/DropdownList.jsx
@@ -1,5 +1,5 @@
 import React, { Component, useEffect, useState } from 'react';
-import { f7, Page, Navbar, List, ListItem, Popover, View, Link, Sheet, Icon, NavRight, BlockTitle, NavLeft } from "framework7-react";
+import { f7, Page, Navbar, List, ListItem, Popover, View, Link, Sheet, Icon, NavRight, BlockTitle, NavLeft, Popup } from "framework7-react";
 import { Device } from '../../../../common/mobile/utils/device';
 import { useTranslation } from 'react-i18next';
 
@@ -28,13 +28,6 @@ const PageCustomOptionList = props => {
     )
 }
 
-const routes = [
-    {
-        path: '/custom-option/',
-        component: PageCustomOptionList
-    }
-]
-
 const PageDropdownList = props => {
     const listItems = props.listItems;
     const curValue = props.curValue;
@@ -122,6 +115,13 @@ const PageDropdownList = props => {
     );
 };
 
+const routes = [
+    {
+        path: '/custom-option/',
+        component: PageCustomOptionList
+    }
+]
+
 class DropdownListView extends Component {
     constructor(props) {
         super(props);
@@ -130,7 +130,7 @@ class DropdownListView extends Component {
     render() {
         return (
             Device.isPhone ? 
-                <Sheet id="dropdown-list-sheet" closeByBackdropClick={true} swipeToClose={true} onSheetClosed={() => this.props.closeModal()}> 
+                <Popup id="dropdown-list-popup" className="dropdown-list-popup" closeByOutsideClick={true} swipeToClose={true} onPopupClosed={() => this.props.closeModal()}> 
                     <PageDropdownList
                         listItems={this.props.listItems}
                         onChangeItemList={this.props.onChangeItemList}
@@ -139,8 +139,9 @@ class DropdownListView extends Component {
                         onAddItem={this.props.onAddItem}
                         curValue={this.props.curValue}
                         enteredValue={this.props.enteredValue}
+                        style={{height: '260px'}}
                     />
-                </Sheet>
+                </Popup>
             : 
                 <Popover id="dropdown-list-popover" className="popover__titled" closeByOutsideClick={true} onPopoverClosed={() => this.props.closeModal()}>
                     <PageDropdownList
@@ -163,7 +164,7 @@ class DropdownListView extends Component {
 const DropdownList = props => {
     useEffect(() => {
         if(Device.isPhone) {
-            f7.sheet.open('#dropdown-list-sheet', true);
+            f7.popup.open('#dropdown-list-popup', true);
         } else {
             f7.popover.open('#dropdown-list-popover', '#dropdown-list-target');
         }