fix(core): sync list titles in sidebar (#6157)

toeverything · Mar 18, 2024 · 8301d82 · 8301d82
1 parent 0b0b3e0
commit 8301d82
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 3 deletions.
diff --git a/packages/frontend/component/src/components/rename-modal/index.tsx b/packages/frontend/component/src/components/rename-modal/index.tsx
@@ -1,4 +1,5 @@
-import { useCallback, useState } from 'react';
+import type { KeyboardEvent } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 
 import Input from '../../ui/input';
 import { Menu } from '../../ui/menu';
@@ -15,10 +16,24 @@ export const RenameModal = ({
   currentName: string;
 }) => {
   const [value, setValue] = useState(currentName);
+
   const handleRename = useCallback(() => {
     onRename(value);
     onOpenChange(false);
   }, [onOpenChange, onRename, value]);
+
+  const onKeyDown = useCallback(
+    (e: KeyboardEvent<HTMLInputElement>) => {
+      if (e.key !== 'Escape') return;
+      if (currentName !== value) setValue(currentName);
+      onOpenChange(false);
+    },
+    [currentName, value, onOpenChange]
+  );
+
+  // Synchronize when the title is changed in the page header or title.
+  useEffect(() => setValue(currentName), [currentName]);
+
   return (
     <Menu
       rootOptions={{
@@ -33,9 +48,10 @@ export const RenameModal = ({
       items={
         <Input
           autoFocus
-          defaultValue={value}
+          value={value}
           onChange={setValue}
           onEnter={handleRename}
+          onKeyDown={onKeyDown}
           data-testid="rename-modal-input"
           style={{ width: 220, height: 34 }}
         />

diff --git a/...ages/frontend/core/src/components/pure/workspace-slider-bar/components/operation-item.tsx b/...ages/frontend/core/src/components/pure/workspace-slider-bar/components/operation-item.tsx
@@ -118,7 +118,7 @@ export const OperationItems = ({
         : []),
 
       {
-        element: <MenuSeparator />,
+        element: <MenuSeparator key="menu-separator" />,
       },
       {
         icon: (