From b7458f6d9c173cf02fc5d6de4d471ede1da733a3 Mon Sep 17 00:00:00 2001
From: Mark McDowall <mark@mcdowall.ca>
Date: Thu, 15 Aug 2019 22:51:30 -0700
Subject: [PATCH] Menu fixes

Fixed: Menus in modals on iOS
Fixed: Menu not closing on outside touch on mobile
---
 frontend/src/Components/Menu/Menu.js        | 27 +++++++++++++++++++++
 frontend/src/Components/Menu/MenuContent.js |  3 +++
 frontend/src/Components/Modal/Modal.js      |  8 +++---
 3 files changed, 34 insertions(+), 4 deletions(-)

diff --git a/frontend/src/Components/Menu/Menu.js b/frontend/src/Components/Menu/Menu.js
index 560d98bf3..fadbcc69e 100644
--- a/frontend/src/Components/Menu/Menu.js
+++ b/frontend/src/Components/Menu/Menu.js
@@ -39,6 +39,7 @@ class Menu extends Component {
 
     this._scheduleUpdate = null;
     this._menuButtonId = getUniqueElememtId();
+    this._menuContentId = getUniqueElememtId();
 
     this.state = {
       isMenuOpen: false,
@@ -99,12 +100,14 @@ class Menu extends Component {
     window.addEventListener('resize', this.onWindowResize);
     window.addEventListener('scroll', this.onWindowScroll, { capture: true });
     window.addEventListener('click', this.onWindowClick);
+    window.addEventListener('touchstart', this.onTouchStart);
   }
 
   _removeListener() {
     window.removeEventListener('resize', this.onWindowResize);
     window.removeEventListener('scroll', this.onWindowScroll, { capture: true });
     window.removeEventListener('click', this.onWindowClick);
+    window.removeEventListener('touchstart', this.onTouchStart);
   }
 
   //
@@ -123,6 +126,30 @@ class Menu extends Component {
     }
   }
 
+  onTouchStart = (event) => {
+    const menuButton = document.getElementById(this._menuButtonId);
+    const menuContent = document.getElementById(this._menuContentId);
+
+    if (!menuButton || !menuContent) {
+      return;
+    }
+
+    if (event.targetTouches.length !== 1) {
+      return;
+    }
+
+    const target = event.targetTouches[0].target;
+
+    if (
+      !menuButton.contains(target) &&
+      !menuContent.contains(target) &&
+      this.state.isMenuOpen
+    ) {
+      this.setState({ isMenuOpen: false });
+      this._removeListener();
+    }
+  }
+
   onWindowResize = () => {
     this.setMaxHeight();
   }
diff --git a/frontend/src/Components/Menu/MenuContent.js b/frontend/src/Components/Menu/MenuContent.js
index fbeb9ddce..e158187d5 100644
--- a/frontend/src/Components/Menu/MenuContent.js
+++ b/frontend/src/Components/Menu/MenuContent.js
@@ -12,6 +12,7 @@ class MenuContent extends Component {
     const {
       forwardedRef,
       className,
+      id,
       children,
       style,
       isOpen
@@ -19,6 +20,7 @@ class MenuContent extends Component {
 
     return (
       <div
+        id={id}
         ref={forwardedRef}
         className={className}
         style={style}
@@ -38,6 +40,7 @@ class MenuContent extends Component {
 MenuContent.propTypes = {
   forwardedRef: PropTypes.func,
   className: PropTypes.string,
+  id: PropTypes.string.isRequired,
   children: PropTypes.node.isRequired,
   style: PropTypes.object,
   isOpen: PropTypes.bool
diff --git a/frontend/src/Components/Modal/Modal.js b/frontend/src/Components/Modal/Modal.js
index ab2f58daa..3b6485ce3 100644
--- a/frontend/src/Components/Modal/Modal.js
+++ b/frontend/src/Components/Modal/Modal.js
@@ -33,6 +33,7 @@ class Modal extends Component {
     this._node = document.getElementById('portal-root');
     this._backgroundRef = null;
     this._modalId = getUniqueElememtId();
+    this._bodyScrollTop = 0;
   }
 
   componentDidMount() {
@@ -73,8 +74,8 @@ class Modal extends Component {
     if (openModals.length === 1) {
       if (isIOS()) {
         setScrollLock(true);
-        const offset = document.body.scrollTop;
-        document.body.style.top = `${offset * -1}px`;
+        const scrollTop = document.body.scrollTop;
+        this._bodyScrollTop = scrollTop;
         elementClass(document.body).add(styles.modalOpenIOS);
       } else {
         elementClass(document.body).add(styles.modalOpen);
@@ -90,9 +91,8 @@ class Modal extends Component {
       setScrollLock(false);
 
       if (isIOS()) {
-        const offset = parseInt(document.body.style.top);
         elementClass(document.body).remove(styles.modalOpenIOS);
-        document.body.scrollTop = (offset * -1);
+        document.body.scrollTop = this._bodyScrollTop;
       } else {
         elementClass(document.body).remove(styles.modalOpen);
       }