vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Fixed #1967 - DataTable, TreeTable | Checkbox and RadioButton Focus Missing on Material

pull/1971/head
Tuğçe Küçükoğlu 2022-01-11 10:50:55 +03:00 committed by Tuğçe Küçükoğlu
parent 6422bc62ee
commit b2c4f22eb3
4 changed files with 6 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/datatable/HeaderCheckbox.vue
View File

@ -1,5 +1,5 @@
<template> <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}]" <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)"> 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> <span :class="['p-checkbox-icon', {'pi pi-check': checked}]"></span>

2
src/components/datatable/RowCheckbox.vue
View File

@ -1,5 +1,5 @@
<template> <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}]" <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)"> 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> <span :class="['p-checkbox-icon', {'pi pi-check': checked}]"></span>

2
src/components/datatable/RowRadioButton.vue
View File

@ -1,5 +1,5 @@
<template> <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 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 class="p-radiobutton-icon"></div>
</div> </div>

6
src/components/treetable/BodyCell.vue
View File

@ -1,9 +1,9 @@
<template> <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> <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> <i :class="togglerIcon"></i>
</button> </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"> <div class="p-hidden-accessible">
<input type="checkbox" @focus="onCheckboxFocus" @blur="onCheckboxBlur" /> <input type="checkbox" @focus="onCheckboxFocus" @blur="onCheckboxBlur" />
</div> </div>
@ -112,7 +112,7 @@ export default {
this.$emit('checkbox-toggle'); this.$emit('checkbox-toggle');
}, },
onCheckboxFocus() { onCheckboxFocus() {
this.checkboxFocused = true; this.checkboxFocused = true;
}, },
onCheckboxBlur() { onCheckboxBlur() {
this.checkboxFocused = false; this.checkboxFocused = false;