From 9600627a0c48c64400e8673dff542ba6d4053a3c Mon Sep 17 00:00:00 2001
From: Emir Karabeg <emirkarabeg@berkeley.edu>
Date: Tue, 21 Jan 2025 17:45:34 -0800
Subject: [PATCH] Fixed auto scroll on input typing when cursor goes outside of
 the input width for sub blocks

---
 .../sub-block/components/short-input.tsx      | 12 ++++++++-
 .../components/sub-block/components/table.tsx | 27 +++++++++++++++++++
 2 files changed, 38 insertions(+), 1 deletion(-)

diff --git a/app/w/components/workflow-block/components/sub-block/components/short-input.tsx b/app/w/components/workflow-block/components/sub-block/components/short-input.tsx
index a4aa1b63b6..2d3adeae87 100644
--- a/app/w/components/workflow-block/components/sub-block/components/short-input.tsx
+++ b/app/w/components/workflow-block/components/sub-block/components/short-input.tsx
@@ -1,5 +1,5 @@
 import { Input } from '@/components/ui/input'
-import { useState } from 'react'
+import { useState, useRef, useEffect } from 'react'
 import { useSubBlockValue } from '../hooks/use-sub-block-value'
 
 interface ShortInputProps {
@@ -15,6 +15,7 @@ export function ShortInput({
   placeholder,
   password,
 }: ShortInputProps) {
+  const inputRef = useRef<HTMLInputElement>(null)
   const [isFocused, setIsFocused] = useState(false)
   const [value, setValue] = useSubBlockValue(blockId, subBlockId)
 
@@ -23,8 +24,17 @@ export function ShortInput({
       ? '•'.repeat(value?.toString().length ?? 0)
       : value?.toString() ?? ''
 
+  useEffect(() => {
+    if (inputRef.current && isFocused) {
+      const input = inputRef.current
+      const scrollPosition = (input.selectionStart ?? 0) * 8
+      input.scrollLeft = scrollPosition - input.offsetWidth / 2
+    }
+  }, [value, isFocused])
+
   return (
     <Input
+      ref={inputRef}
       className="w-full placeholder:text-muted-foreground/50 allow-scroll"
       placeholder={placeholder ?? ''}
       type="text"
diff --git a/app/w/components/workflow-block/components/sub-block/components/table.tsx b/app/w/components/workflow-block/components/sub-block/components/table.tsx
index 61864892c3..852297157c 100644
--- a/app/w/components/workflow-block/components/sub-block/components/table.tsx
+++ b/app/w/components/workflow-block/components/sub-block/components/table.tsx
@@ -21,6 +21,7 @@ export function Table({ columns, blockId, subBlockId }: TableProps) {
   const activePositionRef = useRef<{ rowIndex: number; column: string } | null>(
     null
   )
+  const inputRefs = useRef<Map<string, HTMLInputElement>>(new Map())
 
   useEffect(() => {
     if (activePositionRef.current && document.activeElement === document.body) {
@@ -34,6 +35,20 @@ export function Table({ columns, blockId, subBlockId }: TableProps) {
     }
   })
 
+  // Add new useEffect for handling input scrolling
+  useEffect(() => {
+    if (activePositionRef.current) {
+      const { rowIndex, column } = activePositionRef.current
+      const key = `${rowIndex}-${column}`
+      const input = inputRefs.current.get(key)
+
+      if (input) {
+        const scrollPosition = (input.selectionStart ?? 0) * 8
+        input.scrollLeft = scrollPosition - input.offsetWidth / 2
+      }
+    }
+  }, [value])
+
   // Initialize with empty row if no value exists
   const rows = (value as any[]) || [
     {
@@ -102,6 +117,13 @@ export function Table({ columns, blockId, subBlockId }: TableProps) {
                   )}
                 >
                   <Input
+                    ref={(el) => {
+                      if (el) {
+                        inputRefs.current.set(`${rowIndex}-${column}`, el)
+                      } else {
+                        inputRefs.current.delete(`${rowIndex}-${column}`)
+                      }
+                    }}
                     data-row={rowIndex}
                     data-column={column}
                     value={row.cells[column] || ''}
@@ -112,6 +134,11 @@ export function Table({ columns, blockId, subBlockId }: TableProps) {
                     onFocus={() => {
                       activePositionRef.current = { rowIndex, column }
                     }}
+                    onSelect={(e) => {
+                      const input = e.currentTarget
+                      const scrollPosition = (input.selectionStart ?? 0) * 8
+                      input.scrollLeft = scrollPosition - input.offsetWidth / 2
+                    }}
                     className="border-0 focus-visible:ring-0 focus-visible:ring-offset-0 text-muted-foreground placeholder:text-muted-foreground/50 allow-scroll"
                   />
                 </td>