From ae0a89c580e39934805ee7247e9fdf11aef2e46b Mon Sep 17 00:00:00 2001
From: Luke De Feo <lukedefeo@fb.com>
Date: Tue, 7 Jun 2022 04:29:16 -0700
Subject: [PATCH] Fix context menu for nested/overlapping elements

Summary:
Previously if you activated context menu in detail inspector it would trigger a context menu for multiple
overlapping children. This behaviour can be observed in live by right clicking a nested property an selecting 'Copy value'.
Most of the time you will copy the entire tree as you are clicking on the parents context menu. This is
the solution recommended by the antd team. https://github.com/ant-design/ant-design/issues/33865 (see the
response fiddle from the maintainer)

changelog: Fixed bug when copying value from context menu in detail sidebar

Reviewed By: mweststrate

Differential Revision: D36781555

fbshipit-source-id: 010a04648eb90eb19a47aa0f1f2b0427c9f5f7cc
---
 .../src/ui/data-inspector/DataInspectorNode.tsx            | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/desktop/flipper-plugin/src/ui/data-inspector/DataInspectorNode.tsx b/desktop/flipper-plugin/src/ui/data-inspector/DataInspectorNode.tsx
index 3d2a14518..522aac91a 100644
--- a/desktop/flipper-plugin/src/ui/data-inspector/DataInspectorNode.tsx
+++ b/desktop/flipper-plugin/src/ui/data-inspector/DataInspectorNode.tsx
@@ -18,6 +18,7 @@ import {
   createContext,
   useContext,
   ReactElement,
+  SyntheticEvent,
 } from 'react';
 import styled from '@emotion/styled';
 import DataPreview, {DataValueExtractor, InspectorName} from './DataPreview';
@@ -621,6 +622,7 @@ export const DataInspectorNode: React.FC<DataInspectorProps> = memo(
     return (
       <Dropdown overlay={getContextMenu} trigger={contextMenuTrigger}>
         <BaseContainer
+          onContextMenu={stopPropagation}
           depth={depth}
           disabled={!!setValueProp && !!setValue === false}>
           <PropertyContainer onClick={isExpandable ? handleClick : undefined}>
@@ -716,3 +718,8 @@ function isValueExpandable(data: any) {
     typeof data === 'object' && data !== null && Object.keys(data).length > 0
   );
 }
+
+function stopPropagation(e: SyntheticEvent) {
+  //without this the parent element will receive the context menu event and multiple context menus overlap
+  e.stopPropagation();
+}