From c29299537eb09dca83d81a63149bd3eec18ab0bf Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Tue, 2 Feb 2021 18:44:25 +0300
Subject: [PATCH] Fixed #887 - Selecting all elements results in scrolling to
 table bottom

---
 src/components/datatable/HeaderCheckbox.vue | 10 ++++------
 src/components/datatable/RowCheckbox.vue    | 11 ++++-------
 2 files changed, 8 insertions(+), 13 deletions(-)

diff --git a/src/components/datatable/HeaderCheckbox.vue b/src/components/datatable/HeaderCheckbox.vue
index de1cabd1e..2f70d9533 100755
--- a/src/components/datatable/HeaderCheckbox.vue
+++ b/src/components/datatable/HeaderCheckbox.vue
@@ -1,9 +1,7 @@
 <template>
-    <div class="p-checkbox p-component" @click="onClick">
-        <div class="p-hidden-accessible">
-           <input ref="input" type="checkbox" :checked="checked" @focus="onFocus($event)" @blur="onBlur($event)" :disabled="$attrs.disabled">
-        </div>
-        <div ref="box" :class="['p-checkbox-box p-component', {'p-highlight': checked, 'p-disabled': $attrs.disabled, 'p-focus': focused}]" role="checkbox" :aria-checked="checked">
+    <div class="p-checkbox p-component" @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>
         </div>
     </div>
@@ -24,8 +22,8 @@ export default {
     methods: {
         onClick(event) {
             if (!this.$attrs.disabled) {
+                this.focused = true;
                 this.$emit('change', event);
-                this.$refs.input.focus();
             }
         },
         onFocus() {
diff --git a/src/components/datatable/RowCheckbox.vue b/src/components/datatable/RowCheckbox.vue
index ad35f4aa3..02a9e7361 100755
--- a/src/components/datatable/RowCheckbox.vue
+++ b/src/components/datatable/RowCheckbox.vue
@@ -1,9 +1,7 @@
 <template>
-    <div class="p-checkbox p-component" @click="onClick">
-        <div class="p-hidden-accessible">
-           <input ref="input" type="checkbox" :checked="checked" @focus="onFocus($event)" @blur="onBlur($event)" :disabled="$attrs.disabled">
-        </div>
-        <div ref="box" :class="['p-checkbox-box p-component', {'p-highlight': checked, 'p-disabled': $attrs.disabled, 'p-focus': focused}]" role="checkbox" :aria-checked="checked">
+    <div class="p-checkbox p-component" @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>
         </div>
     </div>
@@ -25,12 +23,11 @@ export default {
     methods: {
         onClick(event) {
             if (!this.$attrs.disabled) {
+                this.focused = true;
                 this.$emit('change', {
                     originalEvent: event,
                     data: this.value
                 });
-
-                this.$refs.input.focus();
             }
         },
         onFocus() {