From 81a2f91dc44524d231f7d5bcc43f086edf628258 Mon Sep 17 00:00:00 2001 From: tlartem Date: Fri, 18 Jul 2025 15:51:23 +0300 Subject: [PATCH] =?UTF-8?q?formula=20bar=20=D0=BF=D0=BE=D0=B4=D0=B4=D0=B5?= =?UTF-8?q?=D1=80=D0=B6=D0=BA=D0=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../DualSpreadsheet/DualSpreadsheet.tsx | 53 +++++++++++++++---- 1 file changed, 43 insertions(+), 10 deletions(-) diff --git a/src/components/DualSpreadsheet/DualSpreadsheet.tsx b/src/components/DualSpreadsheet/DualSpreadsheet.tsx index ec0c892..cf53781 100644 --- a/src/components/DualSpreadsheet/DualSpreadsheet.tsx +++ b/src/components/DualSpreadsheet/DualSpreadsheet.tsx @@ -214,9 +214,16 @@ const Cell = memo( 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) => void onKeyDown: (e: React.KeyboardEvent) => void formulaBarRef: (el: HTMLInputElement | null) => void } @@ -286,7 +293,7 @@ const FormulaBar = memo( // Теперь FormulaBar всегда отображается, так как он один return ( -
+
@@ -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 = ({ } }, [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 = ({ } }, [selectedCell, isEditing, startEditing]) - const handleFormulaBarBlur = useCallback(() => { - if (isEditing) { - stopEditing(true) - } - }, [isEditing, stopEditing]) + const handleFormulaBarBlur = useCallback( + (e: React.FocusEvent) => { + // Проверяем, не переходит ли фокус в ячейку редактирования + 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) => {