From 248cddcc5f82ee9b836aea252dcf63ec446d762e Mon Sep 17 00:00:00 2001
From: automated-signal <37887102+automated-signal@users.noreply.github.com>
Date: Wed, 7 Feb 2024 11:53:40 -0600
Subject: [PATCH] Fix ContextMenuTrigger missing children

Co-authored-by: Jamie Kyle <113370520+jamiebuilds-signal@users.noreply.github.com>
---
 .../conversation/CallingNotification.tsx      | 73 ++++++++++---------
 1 file changed, 38 insertions(+), 35 deletions(-)

diff --git a/ts/components/conversation/CallingNotification.tsx b/ts/components/conversation/CallingNotification.tsx
index b5977f07820..29d1adbbdff 100644
--- a/ts/components/conversation/CallingNotification.tsx
+++ b/ts/components/conversation/CallingNotification.tsx
@@ -72,43 +72,46 @@ export const CallingNotification: React.FC<PropsType> = React.memo(
     const icon = getCallingIcon(type, direction, status);
     return (
       <>
-        <div
-          onContextMenu={handleContextMenu}
-          // @ts-expect-error -- React/TS doesn't know about inert
-          // eslint-disable-next-line react/no-unknown-property
-          inert={props.isSelectMode ? '' : undefined}
-        >
-          <SystemMessage
-            button={renderCallingNotificationButton(props)}
-            contents={
-              <>
-                {getCallingNotificationText(props, i18n)} &middot;{' '}
-                <MessageTimestamp
-                  direction="outgoing"
-                  i18n={i18n}
-                  timestamp={timestamp}
-                  withImageNoCaption={false}
-                  withSticker={false}
-                  withTapToViewExpired={false}
-                />
-              </>
-            }
-            icon={icon}
-            kind={
-              status === DirectCallStatus.Missed ||
-              status === GroupCallStatus.Missed
-                ? SystemMessageKind.Danger
-                : SystemMessageKind.Normal
-            }
-          />
-        </div>
         <ContextMenuTrigger
           id={props.id}
-          ref={ref => {
-            // react-contextmenu's typings are incorrect here
-            menuTriggerRef.current = ref as unknown as ContextMenuTriggerType;
-          }}
-        />
+          // react-contextmenu's typings are incorrect here
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          ref={menuTriggerRef as any}
+          disable={props.isSelectMode}
+          // Immediately hide the context menu on outside click.
+          // This is a bug in react-contextmenu trying to handle touch events.
+          holdToDisplay={-1}
+        >
+          <div
+            // @ts-expect-error -- React/TS doesn't know about inert
+            // eslint-disable-next-line react/no-unknown-property
+            inert={props.isSelectMode ? '' : undefined}
+          >
+            <SystemMessage
+              button={renderCallingNotificationButton(props)}
+              contents={
+                <>
+                  {getCallingNotificationText(props, i18n)} &middot;{' '}
+                  <MessageTimestamp
+                    direction="outgoing"
+                    i18n={i18n}
+                    timestamp={timestamp}
+                    withImageNoCaption={false}
+                    withSticker={false}
+                    withTapToViewExpired={false}
+                  />
+                </>
+              }
+              icon={icon}
+              kind={
+                status === DirectCallStatus.Missed ||
+                status === GroupCallStatus.Missed
+                  ? SystemMessageKind.Danger
+                  : SystemMessageKind.Normal
+              }
+            />
+          </div>
+        </ContextMenuTrigger>
         <MessageContextMenu
           i18n={i18n}
           triggerId={props.id}