fix: restore mouse selection

Author: mlbrgl

src/components/App.vue

@@ -16,7 +16,7 @@
       :regions="filteredRegions"
       :filter="value"
       :highlighted-index="highlightedIndex"
-      :selected="selectedRegion"
+      :current-region="currentRegion"
       @select="onSelectRegion"
     />
     <a
@@ -37,7 +37,7 @@ export default {
     RegionsList,
   },
   props: {
-    regions: { type: Object, required: true },
+    regions: { type: Array, required: true },
     cookieString: { type: String, required: true },
     moreParameters: { type: Object, required: true },
   },
@@ -54,7 +54,7 @@ export default {
         .find(param => param.startsWith('mc='))
         .substr(3);
     },
-    selectedRegion() {
+    currentRegion() {
       return this.regions.filter(region => region.locale === this.selectedLocale)[0];
     },
     filteredRegions() {
@@ -77,14 +77,14 @@ export default {
       this.value = value;
       this.highlightedIndex = 0;
     },
-    onSelectRegion() {
+    onSelectRegion(region = this.filteredRegions[this.highlightedIndex]) {
       const updatedCookieString = this.cookieString
         .split(':')
         .map((paramString) => {
           const [name, value] = paramString.split('=');
           return {
             name,
-            value: name === 'mc' ? this.filteredRegions[this.highlightedIndex].locale : value,
+            value: name === 'mc' ? region.locale : value,
           };
         })
         .reduce((accCookieString, param) => {

src/components/RegionItem.vue

@@ -2,7 +2,7 @@
   <li
     :data-selected="region.locale"
     :class="[$style.item, { [$style.highlighted]: highlighted }]"
-    @click="$emit('select')"
+    @click="$emit('select', region)"
   >
     <span :class="`flag ${country}`" />
     {{ region.name }}

src/components/RegionsList.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="flags-dropdown-body">
     <p class="flags-dropdown-chosen js-select-chosen">
-      <span :class="selected.class" />
-      <strong class="js-selected-text">{{ selected.name }}</strong>
+      <span :class="currentRegion.class" />
+      <strong class="js-selected-text">{{ currentRegion.name }}</strong>
     </p>
     <ul
       ref="regionItems"
@@ -13,7 +13,7 @@
         :key="region.id"
         :region="region"
         :highlighted="index === highlightedIndex"
-        @select="$emit('select')"
+        @select="selectRegion"
       />
     </ul>
   </div>
@@ -28,10 +28,10 @@ export default {
     RegionItem,
   },
   props: {
-    regions: { type: Object, required: true },
+    regions: { type: Array, required: true },
     filter: { type: String, required: true },
     highlightedIndex: { type: Number, required: true },
-    selected: { type: Object, default: () => ({}) },
+    currentRegion: { type: Object, default: () => ({}) },
   },
   computed: {
     listItemHeight() {
@@ -41,5 +41,10 @@ export default {
   beforeUpdate() {
     this.$refs.regionItems.scrollTop = this.listItemHeight * this.highlightedIndex;
   },
+  methods: {
+    selectRegion(region) {
+      this.$emit('select', region);
+    },
+  },
 };
 </script>