fix(core): page jumps unexpectedly when clicking the collection operation (#8182)

close AF-1371

https://github.com/user-attachments/assets/9cc25790-8755-458c-94ac-a8d1b584c428

packages/frontend/core/src/components/page-list/operation-cell.tsx

@@ -35,6 +35,7 @@ import {
   useServices,
   WorkspaceService,
 } from '@toeverything/infra';
+import type { MouseEvent } from 'react';
 import { useCallback, useState } from 'react';
 
 import type { CollectionService } from '../../modules/collection';
@@ -324,29 +325,48 @@ export const CollectionOperationCell = ({
       title: t['com.affine.editCollection.renameCollection'](),
     });
 
-  const handleEditName = useCallback(() => {
+  const handlePropagation = useCallback((event: MouseEvent) => {
-    // use openRenameModal if it is in the sidebar collection list
+    event.preventDefault();
-    openEditCollectionNameModal(collection.name)
+    event.stopPropagation();
-      .then(name => {
+  }, []);
-        return service.updateCollection(collection.id, collection => ({
-          ...collection,
-          name,
-        }));
-      })
-      .catch(err => {
-        console.error(err);
-      });
-  }, [collection.id, collection.name, openEditCollectionNameModal, service]);
 
-  const handleEdit = useCallback(() => {
+  const handleEditName = useCallback(
-    openEditCollectionModal(collection)
+    (event: MouseEvent) => {
-      .then(collection => {
+      handlePropagation(event);
-        return service.updateCollection(collection.id, () => collection);
+      // use openRenameModal if it is in the sidebar collection list
-      })
+      openEditCollectionNameModal(collection.name)
-      .catch(err => {
+        .then(name => {
-        console.error(err);
+          return service.updateCollection(collection.id, collection => ({
-      });
+            ...collection,
-  }, [openEditCollectionModal, collection, service]);
+            name,
+          }));
+        })
+        .catch(err => {
+          console.error(err);
+        });
+    },
+    [
+      collection.id,
+      collection.name,
+      handlePropagation,
+      openEditCollectionNameModal,
+      service,
+    ]
+  );
+
+  const handleEdit = useCallback(
+    (event: MouseEvent) => {
+      handlePropagation(event);
+      openEditCollectionModal(collection)
+        .then(collection => {
+          return service.updateCollection(collection.id, () => collection);
+        })
+        .catch(err => {
+          console.error(err);
+        });
+    },
+    [handlePropagation, openEditCollectionModal, collection, service]
+  );
 
   const handleDelete = useCallback(() => {
     return service.deleteCollection(info, collection.id);