fix: right click on request opens far to the right Kong#8181

iamtimleonard · Dec 5, 2024 · b8d9303 · b8d9303
1 parent 30b92d0
commit b8d9303
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 0 deletions.
diff --git a/packages/insomnia/src/ui/components/dropdowns/request-actions-dropdown.tsx b/packages/insomnia/src/ui/components/dropdowns/request-actions-dropdown.tsx
@@ -38,6 +38,8 @@ interface Props {
   isOpen: boolean;
   onOpenChange: (isOpen: boolean) => void;
   onRename: () => void;
+  contextMenuPosition: { x: number | null; y: number | null };
+  setContextMenuPosition: (position: { x: number | null; y: number | null }) => void;
 }
 
 export const RequestActionsDropdown = ({
@@ -48,6 +50,8 @@ export const RequestActionsDropdown = ({
   isOpen,
   onOpenChange,
   onRename,
+  contextMenuPosition,
+  setContextMenuPosition,
 }: Props) => {
   const {
     settings,
@@ -265,6 +269,7 @@ export const RequestActionsDropdown = ({
       <MenuTrigger
         isOpen={isOpen}
         onOpenChange={isOpen => {
+          setContextMenuPosition({ x: null, y: null });
           isOpen && onOpen();
           onOpenChange(isOpen);
         }}
@@ -283,6 +288,7 @@ export const RequestActionsDropdown = ({
             onAction={key => requestActionList.find(i => i.items.find(a => a.id === key))?.items.find(a => a.id === key)?.action()}
             items={requestActionList}
             className="border select-none text-sm min-w-max border-solid border-[--hl-sm] shadow-lg bg-[--color-bg] py-2 rounded-md overflow-y-auto max-h-[85vh] focus:outline-none"
+            style={(contextMenuPosition.x && contextMenuPosition.y) ? { position: 'fixed', top: contextMenuPosition.y, left: contextMenuPosition.x } : {}}
           >
             {section => (
               <Section className='flex-1 flex flex-col'>

diff --git a/packages/insomnia/src/ui/components/dropdowns/request-group-actions-dropdown.tsx b/packages/insomnia/src/ui/components/dropdowns/request-group-actions-dropdown.tsx
@@ -27,13 +27,17 @@ interface Props extends Partial<DropdownProps> {
   isOpen: boolean;
   onOpenChange: (isOpen: boolean) => void;
   onRename: () => void;
+  contextMenuPosition: { x: number | null; y: number | null };
+  setContextMenuPosition: (position: { x: number | null; y: number | null }) => void;
 }
 
 export const RequestGroupActionsDropdown = ({
   requestGroup,
   isOpen,
   onOpenChange,
   onRename,
+  contextMenuPosition,
+  setContextMenuPosition,
 }: Props) => {
   const {
     activeProject,
@@ -295,6 +299,7 @@ export const RequestGroupActionsDropdown = ({
         isOpen={isOpen}
         onOpenChange={isOpen => {
           isOpen && onOpen();
+          setContextMenuPosition({ x: null, y: null });
           onOpenChange(isOpen);
         }}
       >
@@ -312,6 +317,7 @@ export const RequestGroupActionsDropdown = ({
             onAction={key => requestGroupActionItems.find(i => i.items.find(a => a.id === key))?.items.find(a => a.id === key)?.action()}
             items={requestGroupActionItems}
             className="border select-none text-sm min-w-max border-solid border-[--hl-sm] shadow-lg bg-[--color-bg] py-2 rounded-md overflow-y-auto max-h-[85vh] focus:outline-none"
+            style={(contextMenuPosition.x && contextMenuPosition.y) ? { position: 'fixed', top: contextMenuPosition.y, left: contextMenuPosition.x } : {}}
           >
             {section => (
               <Section className='flex-1 flex flex-col'>

diff --git a/packages/insomnia/src/ui/routes/debug.tsx b/packages/insomnia/src/ui/routes/debug.tsx
@@ -1227,6 +1227,7 @@ const CollectionGridListItem = ({
 }): React.ReactNode => {
   const [isEditable, setIsEditable] = useState(false);
   const [isContextMenuOpen, setIsContextMenuOpen] = useState(false);
+  const [contextMenuPosition, setContextMenuPostion] = useState<{ x: number | null; y: number | null }>({ x: null, y: null });
 
   const action = isRequestGroup(item.doc) ? `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/debug/request-group/${item.doc._id}/update` : `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/debug/request/${item.doc._id}/update`;
 
@@ -1250,6 +1251,7 @@ const CollectionGridListItem = ({
         onContextMenu={e => {
           e.preventDefault();
           setIsContextMenuOpen(true);
+          setContextMenuPostion({ x: e.clientX, y: e.clientY });
         }}
         onDoubleClick={() => setIsEditable(true)}
         data-selected={isSelected}
@@ -1324,6 +1326,8 @@ const CollectionGridListItem = ({
             onRename={() => setIsEditable(true)}
             isOpen={isContextMenuOpen}
             onOpenChange={setIsContextMenuOpen}
+            contextMenuPosition={contextMenuPosition}
+            setContextMenuPosition={setContextMenuPostion}
           />
         ) : (
           <RequestActionsDropdown
@@ -1334,6 +1338,8 @@ const CollectionGridListItem = ({
             isPinned={item.pinned}
             isOpen={isContextMenuOpen}
             onOpenChange={setIsContextMenuOpen}
+            contextMenuPosition={contextMenuPosition}
+            setContextMenuPosition={setContextMenuPostion}
           />
         )}
       </div>