Added auto scroll / Removed map controls

Author: mugetsu

components/Map/index.vue

@@ -29,8 +29,6 @@ export default {
         zoom: 1.6
       })
 
-      map.addControl(new mapboxgl.NavigationControl())
-
       const addLayers = map => {
         map.addSource('covid', {
           type: 'geojson',
@@ -183,13 +181,6 @@ export default {
   width: 100%;
   height: 100%;
 
-  .mapboxgl-ctrl-top-right {
-    .mapboxgl-ctrl {
-      margin-top: 24px;
-      margin-right: 24px;
-    }
-  }
-
   .mapboxgl-ctrl-bottom-left {
     .mapboxgl-ctrl {
       margin: 0 0 16px 24px;

components/Search/index.vue

@@ -47,7 +47,7 @@
           </svg>
         </button>
       </div>
-      <ul class="dropdown-menu">
+      <ul ref="dropdown" class="dropdown-menu">
         <li
           v-for="(suggestion, index) in matches"
           :key="index"
@@ -132,10 +132,16 @@ export default {
       }
     },
     up() {
-      if (this.current > 0) this.current--
+      if (this.current > 0) {
+        this.current--
+        this.onKeyPress()
+      }
     },
     down() {
-      if (this.current < this.matches.length - 1) this.current++
+      if (this.current < this.matches.length - 1) {
+        this.current++
+        this.onKeyPress()
+      }
     },
     isActive(index) {
       return index === this.current
@@ -177,7 +183,6 @@ export default {
             value: this.locationId
           })
         })
-
     },
     onFocus(e) {
       if (e.target.value) {
@@ -197,6 +202,13 @@ export default {
         event_label: 'province change',
         value: this.locationId
       })
+    },
+    onKeyPress() {
+      this.$nextTick(_ => {
+        const parentHeight = parseFloat(getComputedStyle(this.$refs.dropdown, null).height.replace('px', ''))
+        this.$refs.dropdown.scrollTop = 0
+        this.$refs.dropdown.scrollTop = (document.querySelector('li.is-active').offsetTop + 40) - parentHeight
+      })
     }
   }
 }