From 17266248e389fc9b5e796b9f7618035757c55408 Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Wed, 12 Jul 2023 01:40:39 +0200
Subject: [PATCH] keydown hotfix

---
 src/components/sections/StockSection.vue | 37 +++++++++++++++---------
 1 file changed, 23 insertions(+), 14 deletions(-)

diff --git a/src/components/sections/StockSection.vue b/src/components/sections/StockSection.vue
index 9848f68..3563493 100644
--- a/src/components/sections/StockSection.vue
+++ b/src/components/sections/StockSection.vue
@@ -3,6 +3,7 @@
     <div class="section_modes">
       <button
         class="btn"
+        ref="sectionButtonRefs"
         v-for="(id, name, i) in sectionModes"
         @click="chooseSection(id)"
         :data-selected="store.stockSectionMode == id"
@@ -21,13 +22,15 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, KeepAlive, onMounted } from 'vue';
+import { computed, KeepAlive, onMounted, ref } from 'vue';
 import { useStore } from '../../store';
 import StockListTab from '../tabs/StockListTab.vue';
 import StockGeneratorTab from '../tabs/StockGeneratorTab.vue';
 import NumberGeneratorTab from '../tabs/NumberGeneratorTab.vue';
 import WikiListTab from '../tabs/WikiListTab.vue';
 
+const sectionButtonRefs = ref([]);
+
 const store = useStore();
 type SectionMode = typeof store.stockSectionMode;
 
@@ -38,13 +41,27 @@ const sectionModes: { [key: string]: SectionMode } = {
   'GNR SKŁADU': 'stock-generator',
 };
 
-const sectionKeyIndexes: { [key: string]: SectionMode } = {
-  '1': 'stock-list',
-  '2': 'wiki-list',
-  '3': 'number-generator',
-  '4': 'stock-generator',
+const sectionKeyIndexes: { [key: number]: SectionMode } = {
+  1: 'stock-list',
+  2: 'wiki-list',
+  3: 'number-generator',
+  4: 'stock-generator',
 };
 
+onMounted(() => {
+  console.log(sectionButtonRefs.value);
+
+  window.addEventListener('keydown', (e) => {
+    if (e.target instanceof HTMLInputElement) return;
+
+    if (e.key == '1' || e.key == '2' || e.key == '3' || e.key == '4') {
+      const keyNum = Number(e.key);
+      store.stockSectionMode = sectionKeyIndexes[keyNum];
+      (sectionButtonRefs.value[keyNum - 1] as HTMLButtonElement).focus();
+    }
+  });
+});
+
 const chosenSectionComponent = computed(() => {
   switch (store.stockSectionMode) {
     case 'stock-list':
@@ -67,14 +84,6 @@ const chosenSectionComponent = computed(() => {
 function chooseSection(sectionId: SectionMode) {
   store.stockSectionMode = sectionId;
 }
-
-onMounted(() => {
-  window.addEventListener('keydown', (e) => {
-    if (e.key == '1' || e.key == '2' || e.key == '3' || e.key == '4') {
-      store.stockSectionMode = sectionKeyIndexes[e.key];
-    }
-  });
-});
 </script>
 
 <style lang="scss">