From 43c346894d8274b1d462a115aa08056954b2763f Mon Sep 17 00:00:00 2001
From: schlagmichdoch <schlagmichdoch@users.noreply.github.com>
Date: Wed, 7 Aug 2024 15:23:51 +0200
Subject: [PATCH] Make displayName field more intuitive by collapsing it when
 focussed and empty. (fixes #319)

---
 public/scripts/ui-main.js     | 22 ++++++++++++++++++----
 public/styles/styles-main.css |  4 ++++
 2 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/public/scripts/ui-main.js b/public/scripts/ui-main.js
index c7a27e5..ee2c081 100644
--- a/public/scripts/ui-main.js
+++ b/public/scripts/ui-main.js
@@ -201,8 +201,8 @@ class FooterUI {
         this.$discoveryWrapper = $$('footer .discovery-wrapper');
 
         this.$displayName.addEventListener('keydown', e => this._onKeyDownDisplayName(e));
-        this.$displayName.addEventListener('keyup', e => this._onKeyUpDisplayName(e));
-        this.$displayName.addEventListener('blur', e => this._saveDisplayName(e.target.innerText));
+        this.$displayName.addEventListener('focus', e => this._onFocusDisplayName(e));
+        this.$displayName.addEventListener('blur', e => this._onBlurDisplayName(e));
 
         Events.on('display-name', e => this._onDisplayName(e.detail.displayName));
         Events.on('self-display-name-changed', e => this._insertDisplayName(e.detail));
@@ -259,9 +259,23 @@ class FooterUI {
         }
     }
 
-    _onKeyUpDisplayName(e) {
+    _onFocusDisplayName(e) {
+        if (!e.target.innerText) {
+            // Fix z-position of cursor when div is completely empty (Firefox only)
+            e.target.innerText = "\n";
+
+            // On Chromium based browsers the cursor position is lost when adding sth. to the focused node. This adds it back.
+            let sel = window.getSelection();
+            sel.collapse(e.target.lastChild);
+        }
+    }
+
+    async _onBlurDisplayName(e) {
         // fix for Firefox inserting a linebreak into div on edit which prevents the placeholder from showing automatically when it is empty
-        if (/^(\n|\r|\r\n)$/.test(e.target.innerText)) e.target.innerText = '';
+        if (/^(\n|\r|\r\n)$/.test(e.target.innerText)) {
+            e.target.innerText = '';
+        }
+        await this._saveDisplayName(e.target.innerText)
     }
 
     async _saveDisplayName(newDisplayName) {
diff --git a/public/styles/styles-main.css b/public/styles/styles-main.css
index fd5b836..802d568 100644
--- a/public/styles/styles-main.css
+++ b/public/styles/styles-main.css
@@ -557,6 +557,10 @@ footer .logo {
     position: relative;
 }
 
+#display-name:focus::before {
+    display: none;
+}
+
 html:not([dir="rtl"]) #display-name,
 html:not([dir="rtl"]) .edit-pen {
     margin-left: -1rem;