From b2c4f22eb3e51c43ae8c5eb5c03dafd1e1c3b5cf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tu=C4=9F=C3=A7e=20K=C3=BC=C3=A7=C3=BCko=C4=9Flu?=
 <tugcekucukoglu.860@gmail.com>
Date: Tue, 11 Jan 2022 10:50:55 +0300
Subject: [PATCH] Fixed #1967 - DataTable, TreeTable | Checkbox and RadioButton
 Focus Missing on Material

---
 src/components/datatable/HeaderCheckbox.vue | 2 +-
 src/components/datatable/RowCheckbox.vue    | 2 +-
 src/components/datatable/RowRadioButton.vue | 2 +-
 src/components/treetable/BodyCell.vue       | 6 +++---
 4 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/datatable/HeaderCheckbox.vue b/src/components/datatable/HeaderCheckbox.vue
index 2d9edea31..fabd9b18b 100755
--- a/src/components/datatable/HeaderCheckbox.vue
+++ b/src/components/datatable/HeaderCheckbox.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="p-checkbox p-component" @click="onClick" @keydown.space.prevent="onClick">
+    <div :class="['p-checkbox p-component', {'p-checkbox-focused': focused}]" @click="onClick" @keydown.space.prevent="onClick">
         <div ref="box" :class="['p-checkbox-box p-component', {'p-highlight': checked, 'p-disabled': $attrs.disabled, 'p-focus': focused}]"
             role="checkbox" :aria-checked="checked" :tabindex="$attrs.disabled ? null : '0'" @focus="onFocus($event)" @blur="onBlur($event)">
             <span :class="['p-checkbox-icon', {'pi pi-check': checked}]"></span>
diff --git a/src/components/datatable/RowCheckbox.vue b/src/components/datatable/RowCheckbox.vue
index bfeb05d82..a5c50b177 100755
--- a/src/components/datatable/RowCheckbox.vue
+++ b/src/components/datatable/RowCheckbox.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="p-checkbox p-component" @click="onClick">
+    <div :class="['p-checkbox p-component', {'p-checkbox-focused': focused}]" @click="onClick">
         <div ref="box" :class="['p-checkbox-box p-component', {'p-highlight': checked, 'p-disabled': $attrs.disabled, 'p-focus': focused}]"
             role="checkbox" :aria-checked="checked" :tabindex="$attrs.disabled ? null : '0'" @keydown.space.prevent="onClick" @focus="onFocus($event)" @blur="onBlur($event)">
             <span :class="['p-checkbox-icon', {'pi pi-check': checked}]"></span>
diff --git a/src/components/datatable/RowRadioButton.vue b/src/components/datatable/RowRadioButton.vue
index c669b34b2..5980775a2 100755
--- a/src/components/datatable/RowRadioButton.vue
+++ b/src/components/datatable/RowRadioButton.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="p-radiobutton p-component" @click="onClick" tabindex="0" @focus="onFocus($event)" @blur="onBlur($event)" @keydown.space.prevent="onClick">
+    <div :class="['p-radiobutton p-component', {'p-radiobutton-focused': focused}]" @click="onClick" tabindex="0" @focus="onFocus($event)" @blur="onBlur($event)" @keydown.space.prevent="onClick">
         <div ref="box" :class="['p-radiobutton-box p-component', {'p-highlight': checked, 'p-disabled': $attrs.disabled, 'p-focus': focused}]" role="radio" :aria-checked="checked">
             <div class="p-radiobutton-icon"></div>
         </div>
diff --git a/src/components/treetable/BodyCell.vue b/src/components/treetable/BodyCell.vue
index 029447579..ce939a4d4 100644
--- a/src/components/treetable/BodyCell.vue
+++ b/src/components/treetable/BodyCell.vue
@@ -1,9 +1,9 @@
 <template>
-   <td :style="containerStyle" :class="containerClass">
+    <td :style="containerStyle" :class="containerClass">
         <button type="button" class="p-treetable-toggler p-link" @click="toggle" v-if="columnProp('expander')" :style="togglerStyle" tabindex="-1" v-ripple>
             <i :class="togglerIcon"></i>
         </button>
-        <div class="p-checkbox p-treetable-checkbox p-component" @click="toggleCheckbox" v-if="checkboxSelectionMode && columnProp('expander')" role="checkbox" :aria-checked="checked">
+        <div :class="['p-checkbox p-treetable-checkbox p-component', {'p-checkbox-focused': checkboxFocused}]" @click="toggleCheckbox" v-if="checkboxSelectionMode && columnProp('expander')" role="checkbox" :aria-checked="checked">
             <div class="p-hidden-accessible">
                 <input type="checkbox" @focus="onCheckboxFocus" @blur="onCheckboxBlur" />
             </div>
@@ -112,7 +112,7 @@ export default {
             this.$emit('checkbox-toggle');
         },
         onCheckboxFocus() {
-           this.checkboxFocused = true;
+            this.checkboxFocused = true;
         },
         onCheckboxBlur() {
             this.checkboxFocused = false;