🎨 https://github.com/siyuan-note/siyuan/issues/9888

app/src/protyle/render/av/col.ts

@@ -149,7 +149,7 @@ export const getEditHTML = (options: {
 </button>`;
     } else if (colData.type === "relation") {
         const isSelf = colData.relation?.avID === options.data.id;
-        html += `<button class="b3-menu__item" data-type="goSearchAV" data-av-id="${colData.relation?.avID}" data-old-value='${JSON.stringify(colData.relation || {})}'>
+        html += `<button class="b3-menu__item" data-type="goSearchAV" data-av-id="${colData.relation?.avID || ""}" data-old-value='${JSON.stringify(colData.relation || {})}'>
     <span class="b3-menu__label">${window.siyuan.languages.relatedTo}</span>
     <span class="b3-menu__accelerator">${isSelf ? window.siyuan.languages.thisDatabase : ""}</span>
     <svg class="b3-menu__icon b3-menu__icon--small"><use xlink:href="#iconRight"></use></svg>
@@ -219,6 +219,9 @@ export const bindEditEvent = (options: {
     const colData = options.data.view.columns.find((item: IAVColumn) => item.id === colId);
     const nameElement = options.menuElement.querySelector('[data-type="name"]') as HTMLInputElement;
     nameElement.addEventListener("blur", () => {
+        if (colData.type === "relation") {
+            return;
+        }
         const newValue = nameElement.value;
         if (newValue === colData.name) {
             return;
@@ -352,7 +355,6 @@ export const bindEditEvent = (options: {
                 toggleUpdateRelationBtn(options.menuElement, avID);
             });
         } else {
-            openSearchAV(avID, goSearchElement);
             toggleUpdateRelationBtn(options.menuElement, avID);
         }
     }
@@ -468,6 +470,9 @@ export const showColMenu = (protyle: IProtyle, blockElement: Element, cellElemen
     const avID = blockElement.getAttribute("data-av-id");
     const oldValue = cellElement.querySelector(".av__celltext").textContent.trim();
     const menu = new Menu("av-header-cell", () => {
+        if (type === "relation") {
+            return;
+        }
         const newValue = (window.siyuan.menus.menu.element.querySelector(".b3-text-field") as HTMLInputElement).value;
         if (newValue === oldValue) {
             return;

app/src/protyle/render/av/openMenuPanel.ts

@@ -766,7 +766,9 @@ export const openMenuPanel = (options: {
                     updateRelation({
                         protyle: options.protyle,
                         avElement: avPanelElement,
-                        avID
+                        avID,
+                        colsData: data.view.columns,
+                        blockElement: options.blockElement,
                     });
                     event.preventDefault();
                     event.stopPropagation();

app/src/protyle/render/av/relation.ts

@@ -5,6 +5,8 @@ import {fetchPost} from "../../../util/fetch";
 import {escapeHtml} from "../../../util/escape";
 import {transaction} from "../../wysiwyg/transaction";
 import {updateCellsValue} from "./cell";
+import {updateAttrViewCellAnimation} from "./action";
+import {focusBlock} from "../../util/selection";
 
 const genSearchList = (element: Element, keyword: string, avId: string, cb?: () => void) => {
     fetchPost("/api/av/searchAttributeView", {keyword}, (response) => {
@@ -102,31 +104,44 @@ export const openSearchAV = (avId: string, target: HTMLElement) => {
 export const updateRelation = (options: {
     protyle: IProtyle,
     avID: string,
-    avElement: Element
+    avElement: Element,
+    colsData: IAVColumn[],
+    blockElement: Element,
 }) => {
     const inputElement = options.avElement.querySelector('input[data-type="colName"]') as HTMLInputElement;
     const goSearchAVElement = options.avElement.querySelector('.b3-menu__item[data-type="goSearchAV"]') as HTMLElement;
-    const oldValue = JSON.parse(goSearchAVElement.dataset.oldValue) as IAVCellRelationValue;
     const newAVId = goSearchAVElement.getAttribute("data-av-id")
     const colId = options.avElement.querySelector(".b3-menu__item").getAttribute("data-col-id")
+    let colData: IAVColumn;
+    options.colsData.find(item => {
+        if (item.id === colId) {
+            colData = item
+            return true;
+        }
+    })
+    const colNewName = (options.avElement.querySelector('[data-type="name"]') as HTMLInputElement).value;
     transaction(options.protyle, [{
         action: "updateAttrViewColRelation",
         avID: options.avID,
         keyID: colId,
-        id: newAVId || oldValue.avID,
+        id: newAVId || colData.relation.avID,
-        backRelationKeyID: oldValue.avID === newAVId ? oldValue.backKeyID : Lute.NewNodeID(),
+        backRelationKeyID: colData.relation.avID === newAVId ? colData.relation.backKeyID : Lute.NewNodeID(),
         isTwoWay: (options.avElement.querySelector(".b3-switch") as HTMLInputElement).checked,
         name: inputElement.value,
+        format: colNewName
     }], [{
         action: "updateAttrViewColRelation",
         avID: options.avID,
         keyID: colId,
-        id: oldValue.avID,
+        id: colData.relation.avID,
-        backRelationKeyID: oldValue.backKeyID,
+        backRelationKeyID: colData.relation.backKeyID,
-        isTwoWay: oldValue.isTwoWay,
+        isTwoWay: colData.relation.isTwoWay,
-        name: inputElement.dataset.oldValue
+        name: inputElement.dataset.oldValue,
+        format: colData.name
     }]);
     options.avElement.remove();
+    updateAttrViewCellAnimation(options.blockElement.querySelector(`.av__row--header .av__cell[data-col-id="${colId}"]`), undefined, {name: colNewName});
+    focusBlock(options.blockElement);
 }
 
 export const toggleUpdateRelationBtn = (menuItemsElement: HTMLElement, avId: string, resetData = false) => {