From 66d34791596d5816b4b7c4e9d9ca9f8b79049b8f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bertalan=20K=C3=B6rmendy?= <korber314@gmail.com>
Date: Wed, 19 Jun 2024 16:29:28 +0200
Subject: [PATCH] Hide the cartouche context menu when an element is clicked
 (#5998)

## Problem
When opening the data picker from the cartouche context menu, the
context menu is momentarily overlaid on top of the data picker

https://screenshot.click/19-00-v43zc-u88e3.mp4

## Fix
Manually hide the context menu when an option is chosen

**Manual Tests:**
I hereby swear that:

- [x] I opened a hydrogen project and it loaded
- [x] I could navigate to various routes in Preview mode
---
 .../data-reference-cartouche.tsx                 | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/editor/src/components/inspector/sections/component-section/data-reference-cartouche.tsx b/editor/src/components/inspector/sections/component-section/data-reference-cartouche.tsx
index 5f1b7be34574..dd6e7fb4cf13 100644
--- a/editor/src/components/inspector/sections/component-section/data-reference-cartouche.tsx
+++ b/editor/src/components/inspector/sections/component-section/data-reference-cartouche.tsx
@@ -32,6 +32,7 @@ import { AllHtmlEntities } from 'html-entities'
 import { ContextMenuWrapper } from '../../../context-menu-wrapper'
 import type { ContextMenuItem } from '../../../context-menu-items'
 import { optionalMap } from '../../../../core/shared/optional-utils'
+import { useContextMenu } from 'react-contexify'
 
 const htmlEntities = new AllHtmlEntities()
 
@@ -239,12 +240,20 @@ export const DataCartoucheInner = React.forwardRef(
         ? 'external'
         : 'internal'
 
+    const contextMenuId = `cartouche-context-menu-${props.testId}`
+
+    const { hideAll: hideContextMenu } = useContextMenu({ id: contextMenuId })
+
     return (
       <ContextMenuWrapper<ContextMenuItemsData>
-        id={`cartouche-context-menu-${props.testId}`}
+        id={contextMenuId}
         dispatch={dispatch}
         items={contextMenuItems}
-        data={{ openDataPicker: onDoubleClick, deleteCartouche: onDeleteCallback }}
+        data={{
+          openDataPicker: onDoubleClick,
+          deleteCartouche: onDeleteCallback,
+          hideContextMenu: hideContextMenu,
+        }}
       >
         <CartoucheUI
           onDelete={onDelete}
@@ -270,6 +279,7 @@ export const DataCartoucheInner = React.forwardRef(
 type ContextMenuItemsData = {
   openDataPicker?: () => void
   deleteCartouche?: () => void
+  hideContextMenu: () => void
 }
 
 const Separator = {
@@ -285,6 +295,7 @@ const contextMenuItems: Array<ContextMenuItem<ContextMenuItemsData>> = [
     enabled: (data) => data.openDataPicker != null,
     action: (data) => {
       data.openDataPicker?.()
+      data.hideContextMenu()
     },
   },
   {
@@ -292,6 +303,7 @@ const contextMenuItems: Array<ContextMenuItem<ContextMenuItemsData>> = [
     enabled: false,
     action: (data) => {
       data.deleteCartouche?.()
+      data.hideContextMenu()
     },
   },
   Separator,