Search is automatically reset when an item is opened

src/components/FilterTile.vue

@@ -17,6 +17,7 @@
       <div class="space-filler">
         <span>hello</span>
         <span>world</span>
+        <i class="fas fa-rocket" style="color: red;"></i>
       </div>
       <KeyboardShortcutInfo />
   </section>
@@ -47,7 +48,7 @@ export default {
   },
   mounted() {
     window.addEventListener('keyup', (event) => {
-      const { key } = event;
+      const { key, keyCode } = event;
       if (/^[a-zA-Z]$/.test(key) && !document.activeElement.id) {
         try {
           this.input += key;
@@ -56,6 +57,8 @@ export default {
         } catch (e) {
           // Do nothing
         }
+      } else if (keyCode === 27) {
+        this.clearFilterInput();
       }
     });
   },

src/components/Footer.vue

@@ -22,13 +22,15 @@ export default {
 };
 </script>
 
-<!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped lang="scss">
 
 footer {
   padding: 0.5rem;
   text-align: center;
   color: #5e6474;
+  opacity: 0.5;
+  background: #05070e;
+  margin-top: 1rem;
 }
 
 footer a{

src/components/Item.vue

@@ -1,6 +1,6 @@
 <template>
     <el-tooltip placement="bottom" effect="dark" :content="description" :disabled="!description">
-        <a :href="url"  :class="`item ${!icon && !svg? 'short': ''}`"
+        <a :href="url"  :class="`item ${!icon? 'short': ''}`" v-on:click="$emit('itemClicked')"
             tabindex="0" target="_blank" rel="noopener noreferrer">
             <div class="tile-title" :id="`tile-${id}`">
                 <span class="text">{{ title }}</span>
@@ -50,6 +50,9 @@ export default {
     };
   },
   methods: {
+    itemOpened() {
+      this.$emit('itemClicked');
+    },
     isUrl(str) {
       const pattern = new RegExp(/(http|https):\/\/(\w+:{0,1}\w*)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%!\-/]))?/);
       return pattern.test(str);

src/components/ItemGroup.vue

@@ -22,6 +22,7 @@
         :icon="item.icon"
         :iconType="item.iconType"
         :svg="item.svg"
+        @itemClicked="$emit('itemClicked')"
       />
     </div>
   </Collapsable>

src/components/KeyboardShortcutInfo.vue

@@ -48,6 +48,7 @@ export default {
     if (!shouldHide) {
       window.setTimeout(() => { this.shouldHide = shouldHide; }, 3000);
       window.addEventListener('keyup', (ev) => {
+        // User pressed the escape key. Trigger permanent dismissal of dialog
         if (ev.keyCode === 27) this.hideWelcomeHelper();
       });
     } else { // Meh, component not needed.