From 07d31dbfe9217ebbee440f1b2ead182e7e44efaa Mon Sep 17 00:00:00 2001
From: lana-k <skochetova89@gmail.com>
Date: Sat, 28 Oct 2023 19:48:36 +0200
Subject: [PATCH] #115 unselect

---
 src/components/SqlTable/index.vue | 22 ++++++++++++++++------
 1 file changed, 16 insertions(+), 6 deletions(-)

diff --git a/src/components/SqlTable/index.vue b/src/components/SqlTable/index.vue
index 6d44168..c8306bf 100644
--- a/src/components/SqlTable/index.vue
+++ b/src/components/SqlTable/index.vue
@@ -39,7 +39,7 @@
               :data-row="rowIndex - 1"
               :key="colIndex"
               :aria-selected="false"
-              @click="selectCell($event.target)"
+              @click="onCellClick"
             >
               <div class="cell-data" :style="cellStyle">
                 {{ dataSet.values[col][rowIndex - 1 + currentPageData.start] }}
@@ -135,16 +135,26 @@ export default {
       if (!Object.keys(keyCodeMap).includes(e.keyCode.toString())) {
         return
       }
+      e.preventDefault()
 
       this.moveFocusInTable(this.selectedCellElement, keyCodeMap[e.keyCode])
     },
+    onCellClick (e) {
+      this.selectCell(e.target.closest('td'))
+    },
     selectCell (cell) {
-      if (this.selectedCellElement) {
-        this.selectedCellElement.ariaSelected = false
+      if (!cell.ariaSelected || cell.ariaSelected === 'false') {
+        if (this.selectedCellElement) {
+          this.selectedCellElement.ariaSelected = 'false'
+        }
+        cell.ariaSelected = 'true'
+        this.selectedCellElement = cell
+      } else {
+        cell.ariaSelected = 'false'
+        this.selectedCellElement = null
       }
-      cell.ariaSelected = true
-      this.selectedCellElement = cell
-      this.$emit('updateSelectedCell', cell)
+
+      this.$emit('updateSelectedCell', this.selectedCellElement)
     },
     moveFocusInTable (initialCell, direction) {
       const currentRowIndex = +initialCell.dataset.row