Refactor #3330

primefaces · Dec 7, 2022 · 6682267 · 6682267
1 parent fef191a
commit 6682267
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 20 deletions.
diff --git a/src/components/datatable/BodyCell.vue b/src/components/datatable/BodyCell.vue
@@ -18,7 +18,7 @@
         />
         <component v-else-if="column.children && column.children.body && !column.children.editor && d_editing" :is="column.children.body" :data="editingRowData" :column="column" :field="field" :index="rowIndex" :frozenRow="frozenRow" />
         <template v-else-if="columnProp('selectionMode')">
-            <DTRadioButton v-if="columnProp('selectionMode') === 'single'" :value="rowData" :checked="selected" @change="toggleRowWithRadio($event, rowIndex)" />
+            <DTRadioButton v-if="columnProp('selectionMode') === 'single'" :value="rowData" :name="name" :checked="selected" @change="toggleRowWithRadio($event, rowIndex)" />
             <DTCheckbox v-else-if="columnProp('selectionMode') === 'multiple'" :value="rowData" :checked="selected" :aria-selected="selected ? true : undefined" @change="toggleRowWithCheckbox($event, rowIndex)" />
         </template>
         <template v-else-if="columnProp('rowReorder')">
@@ -106,6 +106,10 @@ export default {
         ariaControls: {
             type: String,
             default: null
+        },
+        name: {
+            type: String,
+            default: null
         }
     },
     documentEditListener: null,
@@ -256,6 +260,9 @@ export default {
                         if (event.shiftKey) this.moveToPreviousCell(event);
                         else this.moveToNextCell(event);
                         break;
+
+                    default:
+                        break;
                 }
             }
         },

diff --git a/src/components/datatable/DataTable.vue b/src/components/datatable/DataTable.vue
@@ -873,6 +873,9 @@ export default {
         },
         onRowClick(e) {
             const event = e.originalEvent;
+            const index = e.index;
+            const body = this.$refs.bodyRef && this.$refs.bodyRef.$el;
+            const focusedItem = DomHandler.findSingle(body, 'tr.p-selectable-row[tabindex="0"]');
 
             if (DomHandler.isClickable(event.target)) {
                 return;
@@ -949,6 +952,11 @@ export default {
             }
 
             this.rowTouched = false;
+
+            if (focusedItem) {
+                focusedItem.tabIndex = '-1';
+                DomHandler.find(body, 'tr.p-selectable-row')[index].tabIndex = '0';
+            }
         },
         onRowDblClick(e) {
             const event = e.originalEvent;
@@ -1004,7 +1012,7 @@ export default {
                         break;
 
                     case 'Tab':
-                        this.onTabKey(rowIndex);
+                        this.onTabKey(event, rowIndex);
                         break;
 
                     default:
@@ -1099,13 +1107,22 @@ export default {
                 this.$emit('update:selection', _selection);
             }
         },
-        onTabKey(rowIndex) {
-            const rows = DomHandler.find(this.$refs.table, '.p-selectable-row');
-            const firstSelectedRow = DomHandler.findSingle(this.$refs.table, '.p-highlight');
-            const firstRow = this.findFirstSelectableRow();
+        onTabKey(event, rowIndex) {
+            const body = this.$refs.bodyRef && this.$refs.bodyRef.$el;
+            const rows = DomHandler.find(body, 'tr.p-selectable-row');
 
-            firstSelectedRow ? (firstSelectedRow.tabIndex = '0') : (firstRow.tabIndex = '0');
-            firstRow !== rows[rowIndex] && (rows[rowIndex].tabIndex = '-1');
+            if (event.code === 'Tab' && rows && rows.length > 0) {
+                const firstSelectedRow = DomHandler.findSingle(body, 'tr.p-highlight');
+                const focusedItem = DomHandler.findSingle(body, 'tr.p-selectable-row[tabindex="0"]');
+
+                if (firstSelectedRow) {
+                    firstSelectedRow.tabIndex = '0';
+                    focusedItem !== firstSelectedRow && (focusedItem.tabIndex = '-1');
+                } else {
+                    rows[0].tabIndex = '0';
+                    focusedItem !== rows[0] && (rows[rowIndex].tabIndex = '-1');
+                }
+            }
         },
         findNextSelectableRow(row) {
             let nextRow = row.nextElementSibling;

diff --git a/src/components/datatable/RowRadioButton.vue b/src/components/datatable/RowRadioButton.vue
@@ -1,7 +1,7 @@
 <template>
     <div :class="['p-radiobutton p-component', { 'p-radiobutton-focused': focused }]" @click="onClick">
         <div class="p-hidden-accessible">
-            <input ref="input" type="radio" :checked="checked" :disabled="$attrs.disabled" tabindex="0" @focus="onFocus($event)" @blur="onBlur($event)" @keydown.space.prevent="onClick" />
+            <input ref="input" type="radio" :checked="checked" :disabled="$attrs.disabled" :name="name" tabindex="0" @focus="onFocus($event)" @blur="onBlur($event)" @keydown.space.prevent="onClick" />
         </div>
         <div ref="box" :class="['p-radiobutton-box p-component', { 'p-highlight': checked, 'p-disabled': $attrs.disabled, 'p-focus': focused }]">
             <div class="p-radiobutton-icon"></div>
@@ -18,7 +18,8 @@ export default {
     emits: ['change'],
     props: {
         value: null,
-        checked: null
+        checked: null,
+        name: null
     },
     data() {
         return {

diff --git a/src/components/datatable/TableBody.vue b/src/components/datatable/TableBody.vue
@@ -13,9 +13,9 @@
                 <tr
                     v-if="expandableRowGroups ? isRowGroupExpanded(rowData) : true"
                     :key="getRowKey(rowData, getRowIndex(index))"
-                    :class="getRowClass(rowData, index)"
+                    :class="getRowClass(rowData)"
                     :style="rowStyle"
-                    :tabindex="selectionMode ? (!isARowSelected && index === 0 ? '0' : tabindexArray[index] === true ? '0' : '-1') : null"
+                    :tabindex="setRowTabindex(index)"
                     role="row"
                     :aria-selected="selectionMode ? isSelected(rowData) : null"
                     @click="onRowClick($event, rowData, getRowIndex(index))"
@@ -47,6 +47,7 @@
                             :responsiveLayout="responsiveLayout"
                             :virtualScrollerContentProps="virtualScrollerContentProps"
                             :ariaControls="expandedRowId + '_' + index + '_expansion'"
+                            :name="nameAttributeSelector"
                             @radio-change="onRadioChange($event)"
                             @checkbox-change="onCheckboxChange($event)"
                             @row-toggle="onRowToggle($event)"
@@ -290,16 +291,14 @@ export default {
 
             return getItemOptions ? getItemOptions(index).index : index;
         },
-        getRowClass(rowData, index) {
+        getRowClass(rowData) {
             let rowStyleClass = [];
 
             if (this.selectionMode) {
                 rowStyleClass.push('p-selectable-row');
             }
 
             if (this.selection) {
-                this.setRowTabindex(rowData, index);
-
                 rowStyleClass.push({
                     'p-highlight': this.isSelected(rowData)
                 });
@@ -555,12 +554,12 @@ export default {
 
             contentRef && contentRef(el);
         },
-        setRowTabindex(rowData, index) {
-            const isRowSelected = this.isSelected(rowData);
-
-            this.tabindexArray[index] = isRowSelected ? true : false;
+        setRowTabindex(index) {
+            if (this.selection === null && (this.selectionMode === 'single' || this.selectionMode === 'multiple')) {
+                return index === 0 ? 0 : -1;
+            }
 
-            isRowSelected && (this.isARowSelected = true);
+            return -1;
         }
     },
     computed: {
@@ -585,6 +584,9 @@ export default {
         },
         expandedRowId() {
             return UniqueComponentId();
+        },
+        nameAttributeSelector() {
+            return UniqueComponentId();
         }
     },
     components: {