Can tab over tiles

src/components/FilterTile.vue

@@ -5,6 +5,7 @@
       <input
         id="filter-tiles"
         v-model="input"
+        ref="filter"
         placeholder="Start typing to filter tiles..."
         v-on:input="userIsTypingSomething"
         @keydown.esc="clearFilterInput" />
@@ -31,11 +32,21 @@ export default {
       this.$emit('user-is-searchin', this.input)
     },
     clearFilterInput () {
-      console.log('Esc key pressed')
       this.input = ''
       this.userIsTypingSomething()
+      document.activeElement.blur()
+    },
+  },
+  mounted: function() {
+      window.addEventListener('keyup', (event) => {
+        const key = event.key
+        if(/^[a-zA-Z]$/.test(key) && !document.activeElement.id) {
+          this.input += key
+          this.$refs.filter.focus()
+          this.userIsTypingSomething()
+        }
+      });
     }
-  }
 }
 </script>
 

src/components/Item.vue

@@ -1,15 +1,15 @@
 <template>
     <el-tooltip placement="bottom" effect="dark" :content="description" :disabled="!description">
-        <div class="item">
-        <div class="tile-title" :id="`tile-${id}`">
-            <span class="text">{{ title }}</span>
-            <div class="overflow-dots">...</div>
-        </div>
-        <img
-            v-if="icon"
-            :src="`/img/tile-icons/${icon}.png`"
-            class="tile-icon"
-        />
+        <div class="item" tabindex="0">
+            <div class="tile-title" :id="`tile-${id}`">
+                <span class="text">{{ title }}</span>
+                <div class="overflow-dots">...</div>
+            </div>
+            <img
+                v-if="icon"
+                :src="`/img/tile-icons/${icon}.png`"
+                class="tile-icon"
+            />
         </div>
   </el-tooltip>
 </template>
@@ -64,7 +64,8 @@ export default {
     margin: 8px;
     background: #607d8b33;
     text-align: center;
-    padding: 5px;
+    padding: 2px;
+    border: 2px solid transparent;
     border-radius: 10px;
     box-shadow: 1px 1px 2px #373737;
     cursor: pointer;
@@ -72,6 +73,10 @@ export default {
         box-shadow: 1px 2px 4px #373737;
         background: #607d8b4d;
     }
+    &:focus {
+        border: 2px solid #1CA8DD;
+        outline: none;
+    }
 }
 .tile-title {
     white-space: nowrap;