From 1ba1cb148ea577e3502b296b5f46f046130c7bbe Mon Sep 17 00:00:00 2001
From: cagataycivici <cagatay.civici@gmail.com>
Date: Wed, 7 Aug 2019 22:50:19 +0300
Subject: [PATCH] Keyboard support for TreeTable checkboxes

---
 src/components/treetable/TreeTableRow.vue | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

diff --git a/src/components/treetable/TreeTableRow.vue b/src/components/treetable/TreeTableRow.vue
index eabe810fa..9573b082e 100644
--- a/src/components/treetable/TreeTableRow.vue
+++ b/src/components/treetable/TreeTableRow.vue
@@ -6,9 +6,9 @@
             </span>
             <div class="p-checkbox p-treetable-checkbox p-component" @click="toggleCheckbox" v-if="checkboxSelectionMode && col.expander">
                 <div class="p-hidden-accessible">
-                    <input type="checkbox" />
+                    <input type="checkbox" @focus="onCheckboxFocus" @blur="onCheckboxBlur" />
                 </div>
-                <div :class="checkboxClass">
+                <div ref="checkboxEl" :class="checkboxClass">
                     <span :class="checkboxIcon"></span>
                 </div>
             </div>
@@ -55,6 +55,11 @@ export default {
             default: 0
         }
     },
+    data() {
+        return {
+            checkboxFocused: false
+        }
+    },
     nodeTouched: false,
     methods: {
         resolveFieldData(rowData, field) {
@@ -183,6 +188,12 @@ export default {
                 check: event.check,
                 selectionKeys: _selectionKeys
             }); 
+        },
+        onCheckboxFocus() {
+           this.checkboxFocused = true;
+        },
+        onCheckboxBlur() {
+            this.checkboxFocused = false;
         }
     },
     computed: {
@@ -219,7 +230,7 @@ export default {
             return this.selectionMode === 'checkbox';
         },
         checkboxClass() {
-            return ['p-checkbox-box', {'p-highlight': this.checked}];
+            return ['p-checkbox-box', {'p-highlight': this.checked, 'p-focus': this.checkboxFocused}];
         },
         checkboxIcon() {
             return ['p-checkbox-icon p-c', {'pi pi-check': this.checked, 'pi pi-minus': this.partialChecked}];