Make clicking on labelcontainer move focus to field

ts/editor/editor-field.ts

@@ -21,6 +21,8 @@ export class EditorField extends HTMLDivElement {
             is: "anki-editing-area",
         }) as EditingArea;
         this.appendChild(this.editingArea);
+
+        this.focusIfNotFocused = this.focusIfNotFocused.bind(this);
     }
 
     static get observedAttributes(): string[] {
@@ -31,6 +33,21 @@ export class EditorField extends HTMLDivElement {
         this.setAttribute("ord", String(n));
     }
 
+    focusIfNotFocused(): void {
+        if (!this.editingArea.hasFocus()) {
+            this.editingArea.focus();
+            this.editingArea.caretToEnd();
+        }
+    }
+
+    connectedCallback(): void {
+        this.labelContainer.addEventListener("mousedown", this.focusIfNotFocused);
+    }
+
+    disconnectedCallback(): void {
+        this.labelContainer.removeEventListener("mousedown", this.focusIfNotFocused);
+    }
+
     attributeChangedCallback(name: string, _oldValue: string, newValue: string): void {
         switch (name) {
             case "ord":

ts/editor/fields.scss

@@ -18,11 +18,14 @@
 .editor-field {
     margin: 3px;
     border-radius: 5px;
-    border: 1px solid var(--border);
+    border: 1px solid var(--border-color);
+
+    --border-color: var(--border);
 
     &:focus-within {
         box-shadow: 0 0 0 3px var(--focus-shadow);
-        border-color: var(--focus-border);
+
+        --border-color: var(--focus-border);
     }
 }
 
@@ -30,15 +33,8 @@
     position: relative;
 
     background: var(--frame-bg);
-    border-width: 1px 0 0;
-    border-style: dashed;
-    border-color: var(--border);
     border-radius: 0 0 5px 5px;
 
-    &:focus-within {
-        border-color: var(--focus-border);
-    }
-
     &.dupe {
         // this works around the background colour persisting in copy+paste
         // (https://github.com/ankitects/anki/pull/1278)
@@ -47,10 +43,18 @@
 }
 
 .fname {
+    border-width: 0 0 1px;
+    border-style: dashed;
+    border-color: var(--border-color);
     border-radius: 5px 5px 0 0;
+
     padding: 0px 6px;
 }
 
+.fieldname {
+    user-select: none;
+}
+
 #dupes,
 #cloze-hint {
     position: sticky;

ts/editor/label-container.ts

@@ -63,15 +63,22 @@ export class LabelContainer extends HTMLDivElement {
         this.hoverIcon = this.hoverIcon.bind(this);
         this.removeHoverIcon = this.removeHoverIcon.bind(this);
         this.toggleSticky = this.toggleSticky.bind(this);
+        this.keepFocus = this.keepFocus.bind(this);
+    }
+
+    keepFocus(event: Event): void {
+        event.preventDefault();
     }
 
     connectedCallback(): void {
+        this.addEventListener("mousedown", this.keepFocus);
         this.sticky.addEventListener("click", this.toggleSticky);
         this.sticky.addEventListener("mouseenter", this.hoverIcon);
         this.sticky.addEventListener("mouseleave", this.removeHoverIcon);
     }
 
     disconnectedCallback(): void {
+        this.removeEventListener("mousedown", this.keepFocus);
         this.sticky.removeEventListener("click", this.toggleSticky);
         this.sticky.removeEventListener("mouseenter", this.hoverIcon);
         this.sticky.removeEventListener("mouseleave", this.removeHoverIcon);