formula bar поддержка

src/components/DualSpreadsheet/DualSpreadsheet.tsx

@@ -214,9 +214,16 @@ const Cell = memo(
           <input
             ref={activeCellRef}
             type="text"
-            value={rawValue} // Во время редактирования показываем "сырое" значение
+            value={rawValue} // Во время редактирования показываем текущее редактируемое значение
             onChange={(e) => onCellValueChange(e.target.value)}
-            onBlur={() => stopEditing(true)}
+            onBlur={(e) => {
+              // Проверяем, не переходит ли фокус в formula bar
+              const relatedTarget = e.relatedTarget as HTMLElement
+              if (relatedTarget && relatedTarget.closest('.formula-bar')) {
+                return // Не завершаем редактирование
+              }
+              stopEditing(true)
+            }}
             onKeyDown={(e) => {
               if (e.key === 'Enter') {
                 e.preventDefault()
@@ -266,7 +273,7 @@ interface FormulaBarProps {
   isEditing: boolean
   onValueChange: (value: string) => void
   onFocus: () => void
-  onBlur: () => void
+  onBlur: (e: React.FocusEvent<HTMLInputElement>) => void
   onKeyDown: (e: React.KeyboardEvent<HTMLInputElement>) => void
   formulaBarRef: (el: HTMLInputElement | null) => void
 }
@@ -286,7 +293,7 @@ const FormulaBar = memo(
     // Теперь FormulaBar всегда отображается, так как он один
 
     return (
-      <div className="flex-shrink-0 border-b bg-background px-3 py-1">
+      <div className="formula-bar flex-shrink-0 border-b bg-background px-3 py-1">
         <div className="flex items-center space-x-2">
           <div className="flex min-w-[50px] items-center justify-center rounded-md border bg-muted px-2 py-1">
             <span className="text-xs font-medium text-muted-foreground">
@@ -321,7 +328,17 @@ const FormulaBar = memo(
               value={formulaBarValue}
               onChange={(e) => onValueChange(e.target.value)}
               onFocus={onFocus}
-              onBlur={onBlur}
+              onBlur={(e) => {
+                // Проверяем, не переходит ли фокус в ячейку редактирования
+                const relatedTarget = e.relatedTarget as HTMLElement
+                if (
+                  relatedTarget &&
+                  relatedTarget.closest('input[type="text"]')
+                ) {
+                  return // Не завершаем редактирование
+                }
+                onBlur(e)
+              }}
               onKeyDown={onKeyDown}
             />
             {isCalculating && (
@@ -848,6 +865,13 @@ const DualSpreadsheet: FC<DualSpreadsheetProps> = ({
     }
   }, [isEditing])
 
+  // Синхронизация между formula bar и ячейкой при редактировании
+  useEffect(() => {
+    if (isEditing && formulaBarRef.current) {
+      formulaBarRef.current.value = editingValue
+    }
+  }, [editingValue, isEditing])
+
   const startEditing = useCallback(() => {
     if (!selectedCell) return
     const sheetName = SHEET_NAMES[activeSheet]
@@ -1015,11 +1039,20 @@ const DualSpreadsheet: FC<DualSpreadsheetProps> = ({
     }
   }, [selectedCell, isEditing, startEditing])
 
-  const handleFormulaBarBlur = useCallback(() => {
-    if (isEditing) {
-      stopEditing(true)
-    }
-  }, [isEditing, stopEditing])
+  const handleFormulaBarBlur = useCallback(
+    (e: React.FocusEvent<HTMLInputElement>) => {
+      // Проверяем, не переходит ли фокус в ячейку редактирования
+      const relatedTarget = e.relatedTarget as HTMLElement
+      if (relatedTarget && relatedTarget.closest('input[type="text"]')) {
+        return // Не завершаем редактирование
+      }
+      // Завершаем редактирование только если фокус ушел полностью
+      if (isEditing) {
+        stopEditing(true)
+      }
+    },
+    [isEditing, stopEditing],
+  )
 
   const handleFormulaBarKeyDown = useCallback(
     (e: React.KeyboardEvent<HTMLInputElement>) => {