fix: save file caption/name on every keystroke instead of on close

YousefED · claude · YousefED · commit 60d7870c7c87 · 2026-03-18T19:33:49.000+01:00
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 &lt;noreply@anthropic.com&gt;
diff --git 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
@@ -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>
