various minor improvements

ui/src/components/door_map/PreviewDoor.vue

@@ -9,24 +9,23 @@
   >
     <div
       xmlns="http://www.w3.org/1999/xhtml"
-      class="is-flex is-align-items-center"
+      class="is-flex is-align-items-center is-justify-content-center"
       @click.left="on_click"
     >
-      <div class="container is-fluid has-text-centered">
       <input
         v-if="editing"
         v-model="day_str"
-          @keyup="on_keyup"
-          class="input p-3 is-size-2"
+        ref="day_input"
+        class="input is-large"
         type="number"
         min="-1"
         placeholder="Tag"
+        @keydown="on_keydown"
       />
       <div v-else class="is-size-1 has-text-weight-bold">
         <template v-if="door.day >= 0">{{ door.day }}</template>
       </div>
     </div>
-    </div>
   </foreignObject>
 </template>
 
@@ -57,6 +56,10 @@ export default class extends Vue {
   private editing = false;
   private refreshKey = 0;
 
+  declare $refs: {
+    day_input: HTMLInputElement | null | undefined;
+  };
+
   private refresh() {
     window.setTimeout(() => {
       // don't loop endlessly
@@ -86,32 +89,45 @@ export default class extends Vue {
     return result;
   }
 
+  private get day_num(): number {
+    const result = Number(this.day_str);
+    return isNaN(result) ? -1 : result;
+  }
+
   private toggle_editing() {
     this.day_str = String(this.door.day);
     this.editing = this.editable && !this.editing;
   }
 
   private on_click(event: MouseEvent) {
-    if (event.target === null) {
+    if (event.target === null || !(event.target instanceof HTMLDivElement)) {
       return;
     }
 
-    if (this.editing) {
-      this.door.day = Number(this.day_str);
+    if (!this.editing) {
+      const day_input_focus = () => {
+        if (this.$refs.day_input instanceof HTMLInputElement) {
+          this.$refs.day_input.focus();
+          return;
+        }
+
+        this.$nextTick(day_input_focus);
+      };
+      day_input_focus();
+    } else {
+      this.door.day = this.day_num;
     }
 
-    if (event.target instanceof HTMLDivElement) {
     this.toggle_editing();
   }
-  }
 
-  private on_keyup(event: KeyboardEvent) {
+  private on_keydown(event: KeyboardEvent) {
     if (!this.editing) {
       return;
     }
 
     if (event.key === "Enter") {
-      this.door.day = Number(this.day_str);
+      this.door.day = this.day_num;
       this.toggle_editing();
     } else if (event.key === "Delete") {
       this.door.day = -1;