diff --git a/packages/insomnia/src/ui/components/dropdowns/request-actions-dropdown.tsx b/packages/insomnia/src/ui/components/dropdowns/request-actions-dropdown.tsx index 2eb6587bdc6..97bd749ea65 100644 --- 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 = ({ { + 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 => (
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 index 4b2d1e2aa29..b0a0c5f556c 100644 --- 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,6 +27,8 @@ interface Props extends Partial { 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 = ({ @@ -34,6 +36,8 @@ export const RequestGroupActionsDropdown = ({ 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 => (
diff --git a/packages/insomnia/src/ui/routes/debug.tsx b/packages/insomnia/src/ui/routes/debug.tsx index 441fce9c964..d8b8b77e2a1 100644 --- 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} /> ) : ( )}