Fixed #887 - Selecting all elements results in scrolling to table bottom

pull/938/head
Cagatay Civici 2021-02-02 18:44:25 +03:00
parent 2c61f09d41
commit c29299537e
2 changed files with 8 additions and 13 deletions

View File

@ -1,9 +1,7 @@
<template> <template>
<div class="p-checkbox p-component" @click="onClick"> <div class="p-checkbox p-component" @click="onClick" @keydown.space.prevent="onClick">
<div class="p-hidden-accessible"> <div ref="box" :class="['p-checkbox-box p-component', {'p-highlight': checked, 'p-disabled': $attrs.disabled, 'p-focus': focused}]"
<input ref="input" type="checkbox" :checked="checked" @focus="onFocus($event)" @blur="onBlur($event)" :disabled="$attrs.disabled"> role="checkbox" :aria-checked="checked" :tabindex="$attrs.disabled ? null : '0'" @focus="onFocus($event)" @blur="onBlur($event)">
</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">
<span :class="['p-checkbox-icon', {'pi pi-check': checked}]"></span> <span :class="['p-checkbox-icon', {'pi pi-check': checked}]"></span>
</div> </div>
</div> </div>
@ -24,8 +22,8 @@ export default {
methods: { methods: {
onClick(event) { onClick(event) {
if (!this.$attrs.disabled) { if (!this.$attrs.disabled) {
this.focused = true;
this.$emit('change', event); this.$emit('change', event);
this.$refs.input.focus();
} }
}, },
onFocus() { onFocus() {

View File

@ -1,9 +1,7 @@
<template> <template>
<div class="p-checkbox p-component" @click="onClick"> <div class="p-checkbox p-component" @click="onClick" @keydown.space.prevent="onClick">
<div class="p-hidden-accessible"> <div ref="box" :class="['p-checkbox-box p-component', {'p-highlight': checked, 'p-disabled': $attrs.disabled, 'p-focus': focused}]"
<input ref="input" type="checkbox" :checked="checked" @focus="onFocus($event)" @blur="onBlur($event)" :disabled="$attrs.disabled"> role="checkbox" :aria-checked="checked" :tabindex="$attrs.disabled ? null : '0'" @focus="onFocus($event)" @blur="onBlur($event)">
</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">
<span :class="['p-checkbox-icon', {'pi pi-check': checked}]"></span> <span :class="['p-checkbox-icon', {'pi pi-check': checked}]"></span>
</div> </div>
</div> </div>
@ -25,12 +23,11 @@ export default {
methods: { methods: {
onClick(event) { onClick(event) {
if (!this.$attrs.disabled) { if (!this.$attrs.disabled) {
this.focused = true;
this.$emit('change', { this.$emit('change', {
originalEvent: event, originalEvent: event,
data: this.value data: this.value
}); });
this.$refs.input.focus();
} }
}, },
onFocus() { onFocus() {