fix zen mode with attributes, closes #1213

src/public/app/services/attribute_renderer.js

@@ -11,19 +11,15 @@ function renderAttribute(attribute, $container, renderIsInheritable) {
             $container.append('=');
             $container.append(document.createTextNode(formatValue(attribute.value)));
         }
-
-        $container.append(" ");
     } else if (attribute.type === 'relation') {
         if (attribute.isAutoLink) {
             return;
         }
 
+        // when the relation has just been created then it might not have a value
         if (attribute.value) {
             $container.append(document.createTextNode('~' + attribute.name + isInheritable + "="));
             $container.append(createNoteLink(attribute.value));
-            $container.append(" ");
-        } else {
-            ws.logError(`Relation ${attribute.attributeId} has empty target`);
         }
     } else {
         ws.logError("Unknown attr type: " + attribute.type);

src/public/app/services/utils.js

@@ -230,6 +230,7 @@ function closeActiveDialog() {
 
 let $lastFocusedElement = null;
 
+// perhaps there should be saved focused element per tab?
 function saveFocusedElement() {
     $lastFocusedElement = $(":focus");
 }

src/public/app/widgets/attribute_detail.js

@@ -327,46 +327,6 @@ export default class AttributeDetailWidget extends TabAwareWidget {
         });
     }
 
-    async saveAndClose() {
-        await this.triggerCommand('saveAttributes');
-
-        this.hide();
-
-        this.triggerCommand('focusOnAttributes', {tabId: this.tabContext.tabId});
-    }
-
-    async cancelAndClose() {
-        await this.triggerCommand('reloadAttributes');
-
-        this.hide();
-
-        this.triggerCommand('focusOnAttributes', {tabId: this.tabContext.tabId});
-    }
-
-    userEditedAttribute() {
-        this.updateAttributeInEditor();
-        this.updateHelp();
-        this.relatedNotesSpacedUpdate.scheduleUpdate();
-    }
-
-    updateHelp() {
-        const attrName = this.$inputName.val();
-
-        if (this.attrType in ATTR_HELP && attrName in ATTR_HELP[this.attrType]) {
-            this.$attrHelp
-                .empty()
-                .append($("<td colspan=2>")
-                    .append($("<strong>").text(attrName))
-                    .append(" - ")
-                    .append(ATTR_HELP[this.attrType][attrName])
-                )
-                .show();
-        }
-        else {
-            this.$attrHelp.empty().hide();
-        }
-    }
-
     async showAttributeDetail({allAttributes, attribute, isOwned, x, y, focus}) {
         if (!attribute) {
             this.hide();
@@ -374,6 +334,8 @@ export default class AttributeDetailWidget extends TabAwareWidget {
             return;
         }
 
+        utils.saveFocusedElement();
+
         this.attrType = this.getAttrType(attribute);
 
         const attrName =
@@ -444,12 +406,20 @@ export default class AttributeDetailWidget extends TabAwareWidget {
                 .attr('readonly', () => !isOwned);
         }
         else if (attribute.type === 'relation') {
-            const targetNote = await treeCache.getNote(attribute.value);
-
             this.$inputTargetNote
                 .attr('readonly', () => !isOwned)
-                .val(targetNote ? targetNote.title : "")
+                .val("")
-                .setSelectedNotePath(attribute.value);
+                .setSelectedNotePath("");
+
+            if (attribute.value) {
+                const targetNote = await treeCache.getNote(attribute.value);
+
+                if (targetNote) {
+                    this.$inputTargetNote
+                        .val(targetNote ? targetNote.title : "")
+                        .setSelectedNotePath(attribute.value);
+                }
+            }
         }
 
         this.$inputInheritable
@@ -497,6 +467,46 @@ export default class AttributeDetailWidget extends TabAwareWidget {
         return {left, right};
     }
 
+    async saveAndClose() {
+        await this.triggerCommand('saveAttributes');
+
+        this.hide();
+
+        utils.focusSavedElement();
+    }
+
+    async cancelAndClose() {
+        await this.triggerCommand('reloadAttributes');
+
+        this.hide();
+
+        utils.focusSavedElement();
+    }
+
+    userEditedAttribute() {
+        this.updateAttributeInEditor();
+        this.updateHelp();
+        this.relatedNotesSpacedUpdate.scheduleUpdate();
+    }
+
+    updateHelp() {
+        const attrName = this.$inputName.val();
+
+        if (this.attrType in ATTR_HELP && attrName in ATTR_HELP[this.attrType]) {
+            this.$attrHelp
+                .empty()
+                .append($("<td colspan=2>")
+                    .append($("<strong>").text(attrName))
+                    .append(" - ")
+                    .append(ATTR_HELP[this.attrType][attrName])
+                )
+                .show();
+        }
+        else {
+            this.$attrHelp.empty().hide();
+        }
+    }
+
     async updateRelatedNotes() {
         let {results, count} = await server.post('search-related', this.attribute);
 

src/public/app/widgets/attribute_editor.js

@@ -232,13 +232,17 @@ export default class AttributeEditorWidget extends TabAwareWidget {
     }
 
     // triggered from keyboard shortcut
-    addNewLabelEvent() {
+    addNewLabelEvent({tabId}) {
-        this.handleAddNewAttributeCommand('addNewLabel');
+        if (this.isTab(tabId)) {
+            this.handleAddNewAttributeCommand('addNewLabel');
+        }
     }
 
     // triggered from keyboard shortcut
-    addNewRelationEvent() {
+    addNewRelationEvent({tabId}) {
-        this.handleAddNewAttributeCommand('addNewRelation');
+        if (this.isTab(tabId)) {
+            this.handleAddNewAttributeCommand('addNewRelation');
+        }
     }
 
     async handleAddNewAttributeCommand(command) {
@@ -459,11 +463,17 @@ export default class AttributeEditorWidget extends TabAwareWidget {
     }
 
     async renderOwnedAttributes(ownedAttributes, saved) {
+        ownedAttributes = ownedAttributes.filter(oa => !oa.isDeleted);
+
         const $attributesContainer = $("<div>");
 
-        for (const attribute of ownedAttributes) {
+        for (let i = 0; i < ownedAttributes.length; i++) {
-            if (!attribute.isDeleted) {
+            const attribute = ownedAttributes[i];
-                attributeRenderer.renderAttribute(attribute, $attributesContainer, true);
+
+            attributeRenderer.renderAttribute(attribute, $attributesContainer, true);
+
+            if (i < ownedAttributes.length - 1) {
+                $attributesContainer.append(" ");
             }
         }
 

src/public/app/widgets/attribute_list.js

@@ -220,9 +220,9 @@ export default class AttributeListWidget extends TabAwareWidget {
                     y: e.pageY
                 }));
 
-            $container.append($span);
-
             attributeRenderer.renderAttribute(attribute, $span, false);
+
+            $container.append($span);
         }
     }