fix(tables): route reference preview wheel scrolling

Author: j15z

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/reference-row-preview.test.tsx

@@ -141,8 +141,8 @@ describe('ReferenceRowPreview', () => {
     const subtable = container.querySelector('[role="table"]')
     expect(subtable?.className).toContain('w-full')
     expect(subtable?.className).toContain('h-full')
-    expect(subtable?.className).toContain('cursor-default')
-    expect(subtable?.className).toContain('select-none')
+    expect(subtable?.className).not.toContain('cursor-default')
+    expect(subtable?.className).not.toContain('select-none')
     expect(subtable?.className).toContain('grid-rows-2')
     expect(subtable?.querySelectorAll('[role="row"]')).toHaveLength(2)
     expect(subtable?.querySelectorAll('[role="columnheader"]')).toHaveLength(2)
@@ -163,6 +163,41 @@ describe('ReferenceRowPreview', () => {
     expect(container.innerHTML).not.toContain('rounded-md')
   })
 
+  it('scrolls horizontally when wheel input starts on cell text', () => {
+    renderPreview()
+
+    const subtableViewport = container.querySelector<HTMLElement>('.overscroll-x-contain')
+    const cellText = Array.from(container.querySelectorAll('[role="cell"] span')).find(
+      (element) => element.textContent === 'Acme'
+    )
+    if (!subtableViewport || !cellText) throw new Error('Expected the referenced row preview')
+
+    const wheelEvent = new WheelEvent('wheel', {
+      bubbles: true,
+      cancelable: true,
+      deltaX: 80,
+    })
+    act(() => {
+      cellText.dispatchEvent(wheelEvent)
+    })
+
+    expect(subtableViewport.scrollLeft).toBe(80)
+    expect(wheelEvent.defaultPrevented).toBe(true)
+
+    const verticalWheelEvent = new WheelEvent('wheel', {
+      bubbles: true,
+      cancelable: true,
+      deltaX: 10,
+      deltaY: 80,
+    })
+    act(() => {
+      cellText.dispatchEvent(verticalWheelEvent)
+    })
+
+    expect(subtableViewport.scrollLeft).toBe(80)
+    expect(verticalWheelEvent.defaultPrevented).toBe(false)
+  })
+
   it('sizes the inner scroller to the visible portion of the preview cell', () => {
     let previewCellRight = 1_500
     vi.spyOn(HTMLElement.prototype, 'getBoundingClientRect').mockImplementation(function () {
@@ -248,12 +283,18 @@ describe('ReferenceRowPreview', () => {
     const previewShell = container.querySelector<HTMLElement>('tbody > tr > td > div > div')
     const scrollRoot = container.querySelector<HTMLElement>('[data-table-scroll]')
     const previewCell = container.querySelector<HTMLElement>('tbody > tr > td')
+    const previewViewport = container.querySelector<HTMLElement>('.overscroll-x-contain')
     if (!scrollRoot) throw new Error('Expected the table scroll root to be rendered')
     if (!previewCell) throw new Error('Expected the preview cell to be rendered')
+    if (!previewViewport) throw new Error('Expected the preview viewport to be rendered')
     const scrollListener = registeredListeners.find(
       ({ target, type }) => target === scrollRoot && type === 'scroll'
     )?.listener
+    const wheelListener = registeredListeners.find(
+      ({ target, type }) => target === previewViewport && type === 'wheel'
+    )?.listener
     if (!scrollListener) throw new Error('Expected the scroll listener to be registered')
+    if (!wheelListener) throw new Error('Expected the wheel listener to be registered')
     expect(observe).toHaveBeenCalledTimes(2)
     expect(observe.mock.calls.some(([target]) => target === scrollRoot)).toBe(true)
     expect(observe.mock.calls.some(([target]) => target === previewCell)).toBe(true)
@@ -274,6 +315,11 @@ describe('ReferenceRowPreview', () => {
       type: 'scroll',
       listener: scrollListener,
     })
+    expect(removedListeners).toContainEqual({
+      target: previewViewport,
+      type: 'wheel',
+      listener: wheelListener,
+    })
   })
 
   it('shows no match when the stored row ID does not resolve', () => {

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/reference-row-preview.tsx

@@ -35,6 +35,7 @@ export const ReferenceRowPreview = memo(function ReferenceRowPreview({
 }: ReferenceRowPreviewProps) {
   const previewCellRef = useRef<HTMLTableCellElement>(null)
   const previewShellRef = useRef<HTMLDivElement>(null)
+  const previewViewportRef = useRef<HTMLDivElement>(null)
   const tableQuery = useTable(workspaceId, referenceTableId)
   const rowQuery = useTableRow(workspaceId, referenceTableId, referenceRowId)
   const table = tableQuery.data
@@ -86,6 +87,20 @@ export const ReferenceRowPreview = memo(function ReferenceRowPreview({
     }
   }, [])
 
+  useLayoutEffect(() => {
+    const previewViewport = previewViewportRef.current
+    if (!previewViewport) return
+
+    const handleWheel = (event: WheelEvent) => {
+      if (Math.abs(event.deltaX) <= Math.abs(event.deltaY)) return
+      event.preventDefault()
+      previewViewport.scrollLeft += event.deltaX
+    }
+
+    previewViewport.addEventListener('wheel', handleWheel, { passive: false })
+    return () => previewViewport.removeEventListener('wheel', handleWheel)
+  }, [])
+
   let content: ReactNode
   if (tableQuery.isLoading || rowQuery.isLoading) {
     content = (
@@ -114,10 +129,7 @@ export const ReferenceRowPreview = memo(function ReferenceRowPreview({
     )
   } else {
     content = (
-      <div
-        role='table'
-        className='grid h-full w-full min-w-max cursor-default select-none grid-rows-2 text-small'
-      >
+      <div role='table' className='grid h-full w-full min-w-max grid-rows-2 text-small'>
         <div role='row' className='flex min-w-max'>
           {columns.map((column) => (
             <div
@@ -178,7 +190,10 @@ export const ReferenceRowPreview = memo(function ReferenceRowPreview({
               <span className='font-medium'>{table?.name ?? 'Referenced table'}</span>
             </div>
 
-            <div className='h-[72px] shrink-0 overflow-x-auto overflow-y-hidden overscroll-x-contain border-[var(--border)] border-y bg-[var(--bg)]'>
+            <div
+              ref={previewViewportRef}
+              className='h-[72px] shrink-0 overflow-x-auto overflow-y-hidden overscroll-x-contain border-[var(--border)] border-y bg-[var(--bg)]'
+            >
               {content}
             </div>