From 60d7870c7c8786cfe6d0143177ec250d3683faf7 Mon Sep 17 00:00:00 2001
From: yousefed <yousefdardiry@gmail.com>
Date: Wed, 18 Mar 2026 19:33:49 +0100
Subject: [PATCH] fix: save file caption/name on every keystroke instead of on
 close

Previously, caption/name values were stored in local state and only
saved to the block on Enter. Clicking outside the popover discarded
input, and Enter didn't close the popover.

Now handleChange calls editor.updateBlock directly, input reads from
block props, and the popover is controlled so Enter closes it.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../DefaultButtons/FileCaptionButton.tsx      | 44 ++++++++----------
 .../DefaultButtons/FileRenameButton.tsx       | 45 ++++++++-----------
 2 files changed, 38 insertions(+), 51 deletions(-)

diff --git a/packages/react/src/components/FormattingToolbar/DefaultButtons/FileCaptionButton.tsx b/packages/react/src/components/FormattingToolbar/DefaultButtons/FileCaptionButton.tsx
index 8d1ff3d343..309cc10e13 100644
--- a/packages/react/src/components/FormattingToolbar/DefaultButtons/FileCaptionButton.tsx
+++ b/packages/react/src/components/FormattingToolbar/DefaultButtons/FileCaptionButton.tsx
@@ -9,7 +9,6 @@ import {
   ChangeEvent,
   KeyboardEvent,
   useCallback,
-  useEffect,
   useState,
 } from "react";
 import { RiInputField } from "react-icons/ri";
@@ -59,54 +58,49 @@ export const FileCaptionButton = () => {
     },
   });
 
-  const [currentEditingCaption, setCurrentEditingCaption] = useState<string>();
-
-  useEffect(() => {
-    if (block === undefined) {
-      return;
-    }
-    setCurrentEditingCaption(block.props.caption);
-  }, [block]);
+  const [popoverOpen, setPopoverOpen] = useState(false);
 
   const handleChange = useCallback(
-    (event: ChangeEvent<HTMLInputElement>) =>
-      setCurrentEditingCaption(event.currentTarget.value),
-    [],
-  );
-
-  const handleEnter = useCallback(
-    (event: KeyboardEvent) => {
+    (event: ChangeEvent<HTMLInputElement>) => {
       if (
         block !== undefined &&
         editorHasBlockWithType(editor, block.type, {
           caption: "string",
-        }) &&
-        event.key === "Enter" &&
-        !event.nativeEvent.isComposing
+        })
       ) {
-        event.preventDefault();
         editor.updateBlock(block.id, {
           props: {
-            caption: currentEditingCaption,
+            caption: event.currentTarget.value,
           },
         });
       }
     },
-    [block, currentEditingCaption, editor],
+    [block, editor],
   );
 
+  const handleKeyDown = useCallback((event: KeyboardEvent) => {
+    if (event.key === "Enter" && !event.nativeEvent.isComposing) {
+      event.preventDefault();
+      setPopoverOpen(false);
+    }
+  }, []);
+
   if (block === undefined) {
     return null;
   }
 
   return (
-    <Components.Generic.Popover.Root>
+    <Components.Generic.Popover.Root
+      open={popoverOpen}
+      onOpenChange={setPopoverOpen}
+    >
       <Components.Generic.Popover.Trigger>
         <Components.FormattingToolbar.Button
           className={"bn-button"}
           label={dict.formatting_toolbar.file_caption.tooltip}
           mainTooltip={dict.formatting_toolbar.file_caption.tooltip}
           icon={<RiInputField />}
+          onClick={() => setPopoverOpen((open) => !open)}
         />
       </Components.Generic.Popover.Trigger>
       <Components.Generic.Popover.Content
@@ -117,10 +111,10 @@ export const FileCaptionButton = () => {
           <Components.Generic.Form.TextInput
             name={"file-caption"}
             icon={<RiInputField />}
-            value={currentEditingCaption || ""}
+            value={block.props.caption}
             autoFocus={true}
             placeholder={dict.formatting_toolbar.file_caption.input_placeholder}
-            onKeyDown={handleEnter}
+            onKeyDown={handleKeyDown}
             onChange={handleChange}
           />
         </Components.Generic.Form.Root>
diff --git a/packages/react/src/components/FormattingToolbar/DefaultButtons/FileRenameButton.tsx b/packages/react/src/components/FormattingToolbar/DefaultButtons/FileRenameButton.tsx
index 863febd7d4..87c30fef22 100644
--- a/packages/react/src/components/FormattingToolbar/DefaultButtons/FileRenameButton.tsx
+++ b/packages/react/src/components/FormattingToolbar/DefaultButtons/FileRenameButton.tsx
@@ -9,7 +9,6 @@ import {
   ChangeEvent,
   KeyboardEvent,
   useCallback,
-  useEffect,
   useState,
 } from "react";
 import { RiFontFamily } from "react-icons/ri";
@@ -59,49 +58,42 @@ export const FileRenameButton = () => {
     },
   });
 
-  const [currentEditingName, setCurrentEditingName] = useState<string>();
-
-  useEffect(() => {
-    if (block === undefined) {
-      return;
-    }
-
-    setCurrentEditingName(block.props.name);
-  }, [block]);
+  const [popoverOpen, setPopoverOpen] = useState(false);
 
   const handleChange = useCallback(
-    (event: ChangeEvent<HTMLInputElement>) =>
-      setCurrentEditingName(event.currentTarget.value),
-    [],
-  );
-
-  const handleEnter = useCallback(
-    (event: KeyboardEvent) => {
+    (event: ChangeEvent<HTMLInputElement>) => {
       if (
         block !== undefined &&
         editorHasBlockWithType(editor, block.type, {
           name: "string",
-        }) &&
-        event.key === "Enter" &&
-        !event.nativeEvent.isComposing
+        })
       ) {
-        event.preventDefault();
         editor.updateBlock(block.id, {
           props: {
-            name: currentEditingName,
+            name: event.currentTarget.value,
           },
         });
       }
     },
-    [block, currentEditingName, editor],
+    [block, editor],
   );
 
+  const handleKeyDown = useCallback((event: KeyboardEvent) => {
+    if (event.key === "Enter" && !event.nativeEvent.isComposing) {
+      event.preventDefault();
+      setPopoverOpen(false);
+    }
+  }, []);
+
   if (block === undefined) {
     return null;
   }
 
   return (
-    <Components.Generic.Popover.Root>
+    <Components.Generic.Popover.Root
+      open={popoverOpen}
+      onOpenChange={setPopoverOpen}
+    >
       <Components.Generic.Popover.Trigger>
         <Components.FormattingToolbar.Button
           className={"bn-button"}
@@ -114,6 +106,7 @@ export const FileRenameButton = () => {
             dict.formatting_toolbar.file_rename.tooltip["file"]
           }
           icon={<RiFontFamily />}
+          onClick={() => setPopoverOpen((open) => !open)}
         />
       </Components.Generic.Popover.Trigger>
       <Components.Generic.Popover.Content
@@ -124,14 +117,14 @@ export const FileRenameButton = () => {
           <Components.Generic.Form.TextInput
             name={"file-name"}
             icon={<RiFontFamily />}
-            value={currentEditingName || ""}
+            value={block.props.name}
             autoFocus={true}
             placeholder={
               dict.formatting_toolbar.file_rename.input_placeholder[
                 block.type
               ] || dict.formatting_toolbar.file_rename.input_placeholder["file"]
             }
-            onKeyDown={handleEnter}
+            onKeyDown={handleKeyDown}
             onChange={handleChange}
           />
         </Components.Generic.Form.Root>