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

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();
+}