feat: add scrolling on keyboard navigation

Remove mouse / keyboard continuity to favour maintainability over unsual use cases

Author: mlbrgl

src/components/App.vue

@@ -17,7 +17,6 @@
       :filter="value"
       :highlighted-index="highlightedIndex"
       :selected="selectedRegion"
-      @highlight="onHighlightRegion"
       @select="onSelectRegion"
     />
     <a
@@ -74,9 +73,6 @@ export default {
         this.highlightedIndex += 1;
       }
     },
-    onHighlightRegion(region) {
-      this.highlightedIndex = this.filteredRegions.findIndex(reg => reg.name === region.name);
-    },
     onInput(value) {
       this.value = value;
       this.highlightedIndex = 0;

src/components/RegionItem.vue

@@ -1,8 +1,7 @@
 <template>
   <li
     :data-selected="region.locale"
-    :class="{ [$style.highlighted]: highlighted }"
-    @mouseenter="$emit('highlight', region)"
+    :class="[$style.item, { [$style.highlighted]: highlighted }]"
     @click="$emit('select')"
   >
     <span :class="`flag ${country}`" />
@@ -26,7 +25,11 @@ export default {
 </script>
 
 <style module>
-.highlighted {
-  background-color: lightblue;
+.highlighted,
+.item:hover {
+  background-color: rgb(237, 237, 237);
+}
+.highlighted.item:hover {
+  background-color: rgb(224, 224, 224);
 }
 </style>

src/components/RegionsList.vue

@@ -4,13 +4,15 @@
       <span :class="selected.class" />
       <strong class="js-selected-text">{{ selected.name }}</strong>
     </p>
-    <ul class="flags-dropdown-list">
+    <ul
+      ref="regionItems"
+      class="flags-dropdown-list"
+    >
       <RegionItem
         v-for="(region, index) in regions"
         :key="region.id"
         :region="region"
         :highlighted="index === highlightedIndex"
-        @highlight="highlight"
         @select="$emit('select')"
       />
     </ul>
@@ -31,10 +33,13 @@ export default {
     highlightedIndex: { type: Number, required: true },
     selected: { type: Object, default: () => ({}) },
   },
-  methods: {
-    highlight(region) {
-      this.$emit('highlight', region);
+  computed: {
+    listItemHeight() {
+      return this.$refs.regionItems.querySelector('li').clientHeight;
     },
   },
+  beforeUpdate() {
+    this.$refs.regionItems.scrollTop = this.listItemHeight * this.highlightedIndex;
+  },
 };
 </script>