From 608481cfd7e153aa0b5cde2c8f5f8da2c3019f0e Mon Sep 17 00:00:00 2001
From: Joshen Lim <joshenlimek@gmail.com>
Date: Mon, 9 Feb 2026 16:43:35 +0800
Subject: [PATCH] Prevent double click action in ReferenceRecordPeak (#42606)

## Context

Tiny UX behaviour that we came across - just prevents the double click
action when peeking a foreign row in the table editor

Feels odd that double clicking the `ReferenceRecordPeek` opens the side
panel to select a new foreign row to reference

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

* **Bug Fixes**
* Enhanced double-click handling to prevent unintended actions in the
foreign key selection popover.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 .../formatter/ForeignKeyFormatter.tsx           | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

diff --git a/apps/studio/components/grid/components/formatter/ForeignKeyFormatter.tsx b/apps/studio/components/grid/components/formatter/ForeignKeyFormatter.tsx
index 63c9b9722c5..bfa8f2cab28 100644
--- a/apps/studio/components/grid/components/formatter/ForeignKeyFormatter.tsx
+++ b/apps/studio/components/grid/components/formatter/ForeignKeyFormatter.tsx
@@ -1,16 +1,16 @@
 import type { PostgresTable } from '@supabase/postgres-meta'
-import { ArrowRight } from 'lucide-react'
-import type { PropsWithChildren } from 'react'
-import type { RenderCellProps } from 'react-data-grid'
-
 import { convertByteaToHex } from 'components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/RowEditor.utils'
 import { ButtonTooltip } from 'components/ui/ButtonTooltip'
 import { useTableEditorQuery } from 'data/table-editor/table-editor-query'
 import { isTableLike } from 'data/table-editor/table-editor-types'
 import { useTableQuery } from 'data/tables/table-retrieve-query'
 import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject'
+import { ArrowRight } from 'lucide-react'
+import type { PropsWithChildren } from 'react'
+import type { RenderCellProps } from 'react-data-grid'
 import { Popover_Shadcn_, PopoverContent_Shadcn_, PopoverTrigger_Shadcn_ } from 'ui'
 import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader'
+
 import type { SupaRow } from '../../types'
 import { NullValue } from '../common/NullValue'
 import { ReferenceRecordPeek } from './ReferenceRecordPeek'
@@ -83,7 +83,14 @@ export const ForeignKeyFormatter = (props: Props) => {
                   tooltip={{ content: { side: 'bottom', text: 'View referencing record' } }}
                 />
               </PopoverTrigger_Shadcn_>
-              <PopoverContent_Shadcn_ align="end" className="p-0 w-96">
+              <PopoverContent_Shadcn_
+                align="end"
+                className="p-0 w-96"
+                onDoubleClick={(e) => {
+                  e.preventDefault()
+                  e.stopPropagation()
+                }}
+              >
                 <ReferenceRecordPeek
                   table={targetTable}
                   column={relationship.target_column_name}