Fix #4492: Datatable check/radio respect isDataSelectable (#4493)

primefaces · Jun 7, 2023 · 58d6170 · 58d6170
1 parent 8adf29c
commit 58d6170
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 9 deletions.
diff --git a/components/lib/datatable/BodyCell.js b/components/lib/datatable/BodyCell.js
@@ -589,10 +589,30 @@ export const BodyCell = React.memo((props) => {
             content = showSelection && (
                 <>
                     {selectionMode === 'single' && (
-                        <RowRadioButton checked={props.selected} onChange={onRadioChange} tabIndex={props.tabIndex} tableSelector={props.tableSelector} ariaLabel={label} ptCallbacks={props.ptCallbacks} metaData={props.metaData} />
+                        <RowRadioButton
+                            column={props.column}
+                            checked={props.selected}
+                            disabled={!props.isSelectable({ data: props.rowData, index: props.rowIndex })}
+                            onChange={onRadioChange}
+                            tabIndex={props.tabIndex}
+                            tableSelector={props.tableSelector}
+                            ariaLabel={label}
+                            ptCallbacks={props.ptCallbacks}
+                            metaData={props.metaData}
+                        />
                     )}
                     {selectionMode === 'multiple' && (
-                        <RowCheckbox checked={props.selected} onChange={onCheckboxChange} tabIndex={props.tabIndex} ariaLabel={label} checkIcon={props.checkIcon} ptCallbacks={props.ptCallbacks} metaData={props.metaData} />
+                        <RowCheckbox
+                            column={props.column}
+                            checked={props.selected}
+                            disabled={!props.isSelectable({ data: props.rowData, index: props.rowIndex })}
+                            onChange={onCheckboxChange}
+                            tabIndex={props.tabIndex}
+                            ariaLabel={label}
+                            checkIcon={props.checkIcon}
+                            ptCallbacks={props.ptCallbacks}
+                            metaData={props.metaData}
+                        />
                     )}
                 </>
             );

diff --git a/components/lib/datatable/RowCheckbox.js b/components/lib/datatable/RowCheckbox.js
@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { IconUtils, classNames, mergeProps } from '../utils/Utils';
-import { CheckIcon } from '../icons/check';
 import { ColumnBase } from '../column/ColumnBase';
+import { CheckIcon } from '../icons/check';
+import { IconUtils, classNames, mergeProps } from '../utils/Utils';
 
 export const RowCheckbox = React.memo((props) => {
     const [focusedState, setFocusedState] = React.useState(false);
@@ -45,8 +45,8 @@ export const RowCheckbox = React.memo((props) => {
         }
     };
 
-    const className = classNames('p-checkbox p-component', { 'p-checkbox-focused': focusedState });
-    const boxClassName = classNames('p-checkbox-box p-component', { 'p-highlight': props.checked, 'p-disabled': props.disabled, 'p-focus': focusedState });
+    const className = classNames('p-checkbox p-component', { 'p-checkbox-focused': focusedState, 'p-disabled': props.disabled });
+    const boxClassName = classNames('p-checkbox-box p-component', { 'p-highlight': props.checked, 'p-focus': focusedState });
     const iconClassName = 'p-checkbox-icon';
     const checkboxIconProps = mergeProps(
         {

diff --git a/components/lib/datatable/RowRadioButton.js b/components/lib/datatable/RowRadioButton.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { classNames, DomHandler, mergeProps } from '../utils/Utils';
 import { ColumnBase } from '../column/ColumnBase';
+import { classNames, DomHandler, mergeProps } from '../utils/Utils';
 
 export const RowRadioButton = React.memo((props) => {
     const [focusedState, setFocusedState] = React.useState(false);
@@ -49,8 +49,8 @@ export const RowRadioButton = React.memo((props) => {
         onClick(event);
     };
 
-    const className = classNames('p-radiobutton p-component', { 'p-radiobutton-focused': focusedState });
-    const boxClassName = classNames('p-radiobutton-box p-component', { 'p-highlight': props.checked, 'p-focus': focusedState, 'p-disabled': props.disabled });
+    const className = classNames('p-radiobutton p-component', { 'p-radiobutton-focused': focusedState, 'p-disabled': props.disabled });
+    const boxClassName = classNames('p-radiobutton-box p-component', { 'p-highlight': props.checked, 'p-focus': focusedState });
     const name = `${props.tableSelector}_dt_radio`;
     const radiobuttonWrapperProps = mergeProps(
         {