Focusing and auto-hiding search tooltip. Separated Girl Girl from Jules Jordan.

assets/components/header/header.vue

@@ -61,7 +61,12 @@
 
         <Search class="search-full" />
 
-        <v-popover class="search-compact">
+        <v-popover
+            class="search-compact"
+            :open="searching"
+            @show="searching = true"
+            @hide="searching = false"
+        >
             <button
                 type="button"
                 class="search-button"
@@ -71,7 +76,9 @@
 
             <Search
                 slot="popover"
+                :searching="searching"
                 class="compact"
+                @search="searching = false"
             />
         </v-popover>
     </header>
@@ -84,6 +91,11 @@ export default {
     components: {
         Search,
     },
+    data() {
+        return {
+            searching: false,
+        };
+    },
 };
 </script>
 

assets/components/header/search.vue

@@ -4,6 +4,7 @@
         @submit.prevent="search"
     >
         <input
+            ref="search"
             v-model="query"
             type="search"
             class="search-input"
@@ -21,14 +22,33 @@
 <script>
 async function search() {
     this.$router.push({ name: 'search', query: { q: this.query } });
+    this.$emit('search');
+}
+
+function searching(to) {
+    if (to) {
+        setTimeout(() => {
+            // nextTick does not seem to work
+            this.$refs.search.focus();
+        }, 20);
+    }
 }
 
 export default {
+    props: {
+        searching: {
+            type: Boolean,
+            default: false,
+        },
+    },
     data() {
         return {
             query: this.$route.query ? this.$route.query.q : null,
         };
     },
+    watch: {
+        searching,
+    },
     methods: {
         search,
     },