From 66f1cb1b37468aca467498cdacdd97b6be904eb1 Mon Sep 17 00:00:00 2001
From: Alexander Zinchuk <alx.zinchuk@gmail.com>
Date: Fri, 8 Oct 2021 16:17:22 +0300
Subject: [PATCH] Message Context Menu: Fix auto-closing for PWA on iOS 15
 (#1481)

---
 src/hooks/useContextMenuHandlers.ts | 24 +++++++++++++++++++-----
 1 file changed, 19 insertions(+), 5 deletions(-)

diff --git a/src/hooks/useContextMenuHandlers.ts b/src/hooks/useContextMenuHandlers.ts
index 87d2678f2..acdbc286a 100644
--- a/src/hooks/useContextMenuHandlers.ts
+++ b/src/hooks/useContextMenuHandlers.ts
@@ -2,7 +2,9 @@ import { RefObject } from 'react';
 import { useState, useEffect, useCallback } from '../lib/teact/teact';
 
 import { IAnchorPosition } from '../types';
-import { IS_TOUCH_ENV, IS_SINGLE_COLUMN_LAYOUT } from '../util/environment';
+import {
+  IS_TOUCH_ENV, IS_SINGLE_COLUMN_LAYOUT, IS_PWA, IS_IOS,
+} from '../util/environment';
 
 const LONG_TAP_DURATION_MS = 200;
 
@@ -11,6 +13,12 @@ function checkIsDisabledForMobile() {
   && window.document.body.classList.contains('enable-symbol-menu-transforms');
 }
 
+function stopEvent(e: Event) {
+  e.stopImmediatePropagation();
+  e.preventDefault();
+  e.stopPropagation();
+}
+
 export default (
   elementRef: RefObject<HTMLElement>,
   isMenuDisabled?: boolean,
@@ -80,14 +88,20 @@ export default (
         return;
       }
 
-      // temporarily intercept and clear the next click
+      // Temporarily intercept and clear the next click
       element.addEventListener('touchend', function cancelClickOnce(e) {
         element.removeEventListener('touchend', cancelClickOnce, true);
-        e.stopImmediatePropagation();
-        e.preventDefault();
-        e.stopPropagation();
+        stopEvent(e);
       }, true);
 
+      // On iOS15, in PWA mode, the context menu immediately closes after opening
+      if (IS_PWA && IS_IOS) {
+        element.addEventListener('mousedown', function cancelClickOnce(e) {
+          element.removeEventListener('mousedown', cancelClickOnce, true);
+          stopEvent(e);
+        }, true);
+      }
+
       document.body.classList.add('no-selection');
       setIsContextMenuOpen(true);
       setContextMenuPosition({ x: clientX, y: clientY });