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

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,
     },