Auto-focus quick find input field

Aerowen · Jul 13, 2020 · cf07a93 · cf07a93
1 parent b3645eb
commit cf07a93
Showing 1 changed file with 17 additions and 3 deletions.
diff --git a/ui/src/QuickFind.vue b/ui/src/QuickFind.vue
@@ -1,12 +1,14 @@
 <template>
-  <b-modal :active.sync="active"
+  <b-modal :active.sync="isActive"
+           :destroy-on-hide="false"
            has-modal-card
            trap-focus
            aria-role="dialog"
            aria-modal
            can-cancel>
     <b-field style="width:600px">
       <b-autocomplete
+        ref="autocompleteInput"
         :data="data"
         placeholder="Find scene..."
         field="query"
@@ -60,9 +62,15 @@
     },
     components: {VueLoadImage, GlobalEvents},
     computed: {
-      active: {
+      isActive: {
         get() {
-          return this.$store.state.overlay.showQuickFind;
+          const out = this.$store.state.overlay.showQuickFind;
+          if (out === true) {
+            this.$nextTick(() => {
+              this.$refs.autocompleteInput.$refs.input.focus();
+            });
+          }
+          return out;
         },
         set(values) {
           this.$store.state.overlay.showQuickFind = values;
@@ -83,11 +91,17 @@
           this.data = []
           return
         }
+
+        this.isFetching = true;
+
         let resp = await ky.get(`/api/scene/search`, {
           searchParams: {
             q: query,
           }
         }).json();
+
+        this.isFetching = false;
+
         if (resp.results > 0) {
           this.data = resp.scenes;
         } else {