fixed #2575 - Add selectionAutoFocus property to DataTable

primefaces · Jan 14, 2022 · bf3f625 · bf3f625
1 parent f757201
commit bf3f625
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 3 deletions.
diff --git a/components/lib/datatable/BodyRow.js b/components/lib/datatable/BodyRow.js
@@ -127,6 +127,10 @@ export class BodyRow extends Component {
     }
 
     onClick(event) {
+        const row = event.currentTarget;
+        const tabbableEl = DomHandler.findSingle(row.parentElement, 'tr[tabIndex="0"]');
+        tabbableEl && this.changeTabIndex(tabbableEl, row);
+
         this.props.onRowClick({ originalEvent: event, data: this.props.rowData, index: this.props.index });
     }
 

diff --git a/components/lib/datatable/DataTable.js b/components/lib/datatable/DataTable.js
@@ -53,6 +53,7 @@ export class DataTable extends Component {
         metaKeySelection: true,
         selectOnEdit: true,
         selectionPageOnly: false,
+        selectionAutoFocus: true,
         showSelectAll: true,
         selectAll: false,
         onSelectAllChange: null,
@@ -180,6 +181,7 @@ export class DataTable extends Component {
         metaKeySelection: PropTypes.bool,
         selectOnEdit: PropTypes.bool,
         selectionPageOnly: PropTypes.bool,
+        selectionAutoFocus: PropTypes.bool,
         showSelectAll: PropTypes.bool,
         selectAll: PropTypes.bool,
         onSelectAllChange: PropTypes.func,
@@ -1638,7 +1640,7 @@ export class DataTable extends Component {
                 rowGroupHeaderTemplate={this.props.rowGroupHeaderTemplate} rowExpansionTemplate={this.props.rowExpansionTemplate} rowGroupFooterTemplate={this.props.rowGroupFooterTemplate}
                 onRowEditChange={this.props.onRowEditChange} compareSelectionBy={this.props.compareSelectionBy} selectOnEdit={this.props.selectOnEdit}
                 onRowEditInit={this.props.onRowEditInit} rowEditValidator={this.props.rowEditValidator} onRowEditSave={this.props.onRowEditSave} onRowEditComplete={this.props.onRowEditComplete} onRowEditCancel={this.props.onRowEditCancel}
-                cellClassName={this.props.cellClassName} responsiveLayout={this.props.responsiveLayout}
+                cellClassName={this.props.cellClassName} responsiveLayout={this.props.responsiveLayout} selectionAutoFocus={this.props.selectionAutoFocus}
                 showSelectionElement={this.props.showSelectionElement} showRowReorderElement={this.props.showRowReorderElement}
                 expandedRowIcon={this.props.expandedRowIcon} collapsedRowIcon={this.props.collapsedRowIcon} rowClassName={this.props.rowClassName}
                 isVirtualScrollerDisabled={true} />
@@ -1658,7 +1660,7 @@ export class DataTable extends Component {
                 rowGroupHeaderTemplate={this.props.rowGroupHeaderTemplate} rowExpansionTemplate={this.props.rowExpansionTemplate} rowGroupFooterTemplate={this.props.rowGroupFooterTemplate}
                 onRowEditChange={this.props.onRowEditChange} compareSelectionBy={this.props.compareSelectionBy} selectOnEdit={this.props.selectOnEdit}
                 onRowEditInit={this.props.onRowEditInit} rowEditValidator={this.props.rowEditValidator} onRowEditSave={this.props.onRowEditSave} onRowEditComplete={this.props.onRowEditComplete} onRowEditCancel={this.props.onRowEditCancel}
-                cellClassName={this.props.cellClassName} responsiveLayout={this.props.responsiveLayout}
+                cellClassName={this.props.cellClassName} responsiveLayout={this.props.responsiveLayout} selectionAutoFocus={this.props.selectionAutoFocus}
                 showSelectionElement={this.props.showSelectionElement} showRowReorderElement={this.props.showRowReorderElement}
                 expandedRowIcon={this.props.expandedRowIcon} collapsedRowIcon={this.props.collapsedRowIcon} rowClassName={this.props.rowClassName}
                 virtualScrollerContentRef={contentRef} virtualScrollerOptions={options} isVirtualScrollerDisabled={isVirtualScrollerDisabled} />

diff --git a/components/lib/datatable/TableBody.js b/components/lib/datatable/TableBody.js
@@ -441,7 +441,7 @@ export class TableBody extends Component {
     focusOnElement(event, isFocused) {
         const target = event.currentTarget;
 
-        if (!this.allowCellSelection()) {
+        if (!this.allowCellSelection() && this.props.selectionAutoFocus) {
             if (this.isCheckboxSelectionModeInColumn()) {
                 const checkbox = DomHandler.findSingle(target, 'td.p-selection-column .p-checkbox-box');
                 checkbox && checkbox.focus();