Increment day only when selection not focused

Manual increment will be done only if the selection element is not
focused, otherwise it would be incremented by two days.

src/App.vue

@@ -6,7 +6,7 @@
       <option v-for="mensa in mensen" :value="mensa.url">{{mensa.name}}</option>
     </select>
 
-    Wann? <select v-model="when">
+    Wann? <select v-model="when" id="selWhen">
       <option v-for="day in days" :value="day" :key="day">{{dayOfWeek[day]}}</option>
     </select>
     <router-view></router-view>
@@ -28,9 +28,9 @@
 import Mensen from '@/lib/Mensen.js'
 export default {
   name: 'app',
-  data () {
+  data() {
     return {
-      menu: {},
+      selWhen: {},
       mensen: Mensen,
       days: [1, 2, 3, 4, 5, 6],
       dayOfWeek: {
@@ -44,24 +44,24 @@ export default {
     }
   },
   methods: {
-    previousDay () {
-      this.when === 1 ? this.when = 6 : this.when--
+    previousDay() {
+      this.when === 1 ? (this.when = 6) : this.when--
     },
-    nextDay () {
-      this.when === 6 ? this.when = 1 : this.when++
+    nextDay() {
+      this.when === 6 ? (this.when = 1) : this.when++
     }
   },
   filters: {
-    noBreak (value) {
+    noBreak(value) {
       return value.replace(/\s/g, '\u00a0')
     }
   },
   computed: {
     where: {
-      get () {
+      get() {
         return this.$store.state.where
       },
-      set (value) {
+      set(value) {
         this.$store.dispatch('loadMeals', {
           when: this.when,
           where: value
@@ -69,10 +69,10 @@ export default {
       }
     },
     when: {
-      get () {
+      get() {
         return this.$store.state.when
       },
-      set (value) {
+      set(value) {
         this.$store.dispatch('loadMeals', {
           when: value,
           where: this.where
@@ -80,32 +80,44 @@ export default {
       }
     }
   },
-  created () {
+  created() {
     this.$store.dispatch('loadMeals', {
       when: this.when,
       where: this.where
     })
     let vm = this
-    document.onkeydown = (evt) => {
+    document.onkeydown = evt => {
       evt = evt || window.event
       switch (evt.keyCode) {
         case 37:
+          if (vm.selWhen !== document.activeElement) {
+            // increment only if selection is not focused, avoid double execution
             vm.previousDay()
+          }
           break
         case 39:
+          if (vm.selWhen !== document.activeElement) {
+            // increment only if selection is not focused, avoid double execution
             vm.nextDay()
             break
           }
       }
     }
+  },
+  mounted() {
+    this.selWhen = document.getElementById('selWhen')
+  }
 }
 </script>
 
-<style src="./assets/base.css"></style>
-<style src="./assets/links.css"></style>
+<style src="./assets/base.css">
+</style>
+<style src="./assets/links.css">
+</style>
 <style>
 #app {
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
@@ -114,21 +126,21 @@ export default {
   max-width: 30em;
   margin: 0 auto;
 }
-footer{
+footer {
   margin: 1em 0;
 }
 footer > div {
   margin: 0.5em;
 }
 
-nav>a{
+nav > a {
   margin: 0.3em;
   wrap: no-wrap;
 }
-.router-link-active:before{
+.router-link-active:before {
   content: '>';
 }
-.router-link-active:after{
+.router-link-active:after {
   content: '<';
 }
 </style>