From d6c6bc389b0d84a45c72df75e29fbd48b8ea6a81 Mon Sep 17 00:00:00 2001
From: Maxim Kadushkin <maxim.kadushkin@onlyoffice.com>
Date: Tue, 16 Feb 2021 20:31:27 +0300
Subject: [PATCH] [DE mobile] fix context menu close

---
 apps/common/mobile/lib/controller/ContextMenu.jsx    | 12 +++++++-----
 apps/common/mobile/lib/view/ContextMenu.jsx          |  6 ++++--
 .../mobile/src/controller/ContextMenu.jsx            |  3 ++-
 apps/documenteditor/mobile/src/page/main.jsx         |  5 ++++-
 4 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/apps/common/mobile/lib/controller/ContextMenu.jsx b/apps/common/mobile/lib/controller/ContextMenu.jsx
index 27d46485d..137a16ee9 100644
--- a/apps/common/mobile/lib/controller/ContextMenu.jsx
+++ b/apps/common/mobile/lib/controller/ContextMenu.jsx
@@ -2,7 +2,9 @@ import React, { Component } from 'react';
 import { f7 } from 'framework7-react';
 import { Device } from '../../../../common/mobile/utils/device'
 
-import ContextMenuView from '../view/ContextMenu';
+import ContextMenuView, { idContextMenuElement } from '../view/ContextMenu';
+
+const idCntextMenuTargetElement = '#idx-context-menu-target';
 
 class ContextMenuController extends Component {
     constructor(props) {
@@ -19,10 +21,10 @@ class ContextMenuController extends Component {
     }
 
     onDocumentReady() {
-        this.$targetEl = $$('#idx-context-menu-target');
+        this.$targetEl = $$(idCntextMenuTargetElement);
         if ( !this.$targetEl.length ) {
             // this.$targetEl = $$('<div id="idx-context-menu-target" style="position:absolute;width:15px;height:15px;background-color:green;z-index:1;"></div>');
-            this.$targetEl = $$('<div id="idx-context-menu-target" style="position:absolute;"></div>');
+            this.$targetEl = $$(`<div id="${idCntextMenuTargetElement} style="position:absolute;"></div>`);
             this.$targetEl.css({left: '-10000px', top: '-10000px'});
 
             $$('#editor_sdk').append(this.$targetEl);
@@ -93,7 +95,7 @@ class ContextMenuController extends Component {
     onApiOpenContextMenu(x, y) {
         if ( !this.state.opened ) {
             this.$targetEl.css({left: `${x}px`, top: `${y}px`});
-            const popover = f7.popover.open('#idx-context-menu-popover', '#idx-context-menu-target');
+            const popover = f7.popover.open(idContextMenuElement, idCntextMenuTargetElement);
 
             if ( Device.android )
                 this.offsetPopoverTop(popover);
@@ -106,7 +108,7 @@ class ContextMenuController extends Component {
 
     onApiHideContextMenu() {
         if ( this.state.opened ) {
-            f7.popover.close('#idx-context-menu-popover');
+            f7.popover.close(idContextMenuElement);
 
             this.$targetEl.css({left: '-10000px', top: '-10000px'});
             this.setState({opened: false});
diff --git a/apps/common/mobile/lib/view/ContextMenu.jsx b/apps/common/mobile/lib/view/ContextMenu.jsx
index c2c8411e2..efce826a2 100644
--- a/apps/common/mobile/lib/view/ContextMenu.jsx
+++ b/apps/common/mobile/lib/view/ContextMenu.jsx
@@ -2,6 +2,8 @@ import React, { Component } from 'react';
 import { Popover, List, ListItem, ListButton, Link, Icon } from 'framework7-react';
 import { f7 } from 'framework7-react';
 
+const idContextMenuElement = "idx-context-menu-popover";
+
 class ContextMenuView extends Component {
     constructor(props) {
         super(props);
@@ -15,7 +17,7 @@ class ContextMenuView extends Component {
         const buttons = this.props.items || {};
 
         return (
-            <Popover id="idx-context-menu-popover"
+            <Popover id={idContextMenuElement}
                      className="document-menu"
                      backdrop={false}
                      closeByBackdropClick={false}
@@ -36,4 +38,4 @@ class ContextMenuView extends Component {
     }
 }
 
-export default ContextMenuView;
\ No newline at end of file
+export {ContextMenuView as default, idContextMenuElement};
\ No newline at end of file
diff --git a/apps/documenteditor/mobile/src/controller/ContextMenu.jsx b/apps/documenteditor/mobile/src/controller/ContextMenu.jsx
index 99bc67e89..23d5d362d 100644
--- a/apps/documenteditor/mobile/src/controller/ContextMenu.jsx
+++ b/apps/documenteditor/mobile/src/controller/ContextMenu.jsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { f7 } from 'framework7-react';
 import ContextMenuController from '../../../../common/mobile/lib/controller/ContextMenu';
+import { idContextMenuElement } from '../../../../common/mobile/lib/view/ContextMenu';
 
 class ContextMenu extends ContextMenuController {
     constructor(props) {
@@ -35,4 +36,4 @@ class ContextMenu extends ContextMenuController {
     }
 }
 
-export { ContextMenu };
\ No newline at end of file
+export { ContextMenu, idContextMenuElement };
\ No newline at end of file
diff --git a/apps/documenteditor/mobile/src/page/main.jsx b/apps/documenteditor/mobile/src/page/main.jsx
index 80e19210d..30b561969 100644
--- a/apps/documenteditor/mobile/src/page/main.jsx
+++ b/apps/documenteditor/mobile/src/page/main.jsx
@@ -1,4 +1,5 @@
 import React, { Component } from 'react';
+import { f7 } from 'framework7-react';
 import { Page, View, Navbar, NavLeft, NavRight, Link, Icon } from 'framework7-react';
 
 import EditOptions from '../view/edit/Edit';
@@ -7,7 +8,7 @@ import Settings from '../view/settings/Settings';
 import Collaboration from '../../../../common/mobile/lib/view/collaboration/Collaboration.jsx'
 import { Device } from '../../../../common/mobile/utils/device'
 import { Search, SearchSettings } from '../controller/Search';
-import { ContextMenu } from '../controller/ContextMenu';
+import { ContextMenu, idContextMenuElement } from '../controller/ContextMenu';
 
 export default class MainPage extends Component {
     constructor(props) {
@@ -21,6 +22,8 @@ export default class MainPage extends Component {
     }
 
     handleClickToOpenOptions = opts => {
+        f7.popover.close(idContextMenuElement, false);
+
         this.setState(state => {
             if ( opts == 'edit' )
                 return {editOptionsVisible: true};