Fix toggleRowSelected action value for the Table stateReducer. (#…

…2148)

.changeset/two-lemons-end.md

@@ -0,0 +1,5 @@
+---
+'@itwin/itwinui-react': patch
+---
+
+Fixed regression where the value of the `toggleRowSelected` action for the `Table` would be undefined when `selectSubRows` was set to `false`.

packages/itwinui-react/src/core/Table/columns/selectionColumn.tsx

@@ -91,7 +91,7 @@ export const SelectionColumn = <T extends Record<string, unknown>>(
               ),
             );
           } else {
-            row.toggleRowSelected();
+            row.toggleRowSelected(!row.isSelected);
           }
         }}
       />

testing/e2e/app/routes/Table/route.tsx

@@ -17,6 +17,7 @@ export default function Resizing() {
   const empty = searchParams.get('empty') === 'true';
   const scroll = searchParams.get('scroll') === 'true';
   const oneRow = searchParams.get('oneRow') === 'true';
+  const stateReducer = searchParams.get('stateReducer') === 'true';
   const scrollRow = Number(searchParams.get('scrollRow'));
 
   const virtualizedData = React.useMemo(() => {
@@ -158,6 +159,16 @@ export default function Resizing() {
                 rows.findIndex((row) => row.original === data[scrollRow])
             : undefined
         }
+        stateReducer={
+          stateReducer
+            ? (newState, action, previousState, instance) => {
+                if (action.type === 'toggleRowSelected') {
+                  console.log(action.value);
+                }
+                return newState;
+              }
+            : undefined
+        }
       />
     </>
   );

testing/e2e/app/routes/Table/spec.ts

@@ -360,6 +360,42 @@ test.describe('Table row selection', () => {
     await expect(row21Checkbox).not.toBeChecked();
   });
 
+  test('action object for row selection in state reducer should have a defined value when selectSubRows is set to false', async ({
+    page,
+  }) => {
+    await page.goto(
+      '/Table?isSelectable=true&subRows=true&selectSubRows=false&stateReducer=true',
+    );
+
+    const row2 = page
+      .getByRole('row')
+      .filter({ has: page.getByRole('cell').getByText('2', { exact: true }) });
+    const row2SubRowExpander = row2.getByLabel('Toggle sub row');
+    await row2SubRowExpander.click();
+
+    const row21 = page.getByRole('row').filter({
+      has: page.getByRole('cell').getByText('2.1', { exact: true }),
+    });
+    const row2Checkbox = row2.getByRole('checkbox');
+    const row21Checkbox = row21.getByRole('checkbox');
+
+    //Works correctly for sub row
+    const firstSubRowMessage = page.waitForEvent('console');
+    await row21Checkbox.click();
+    expect((await firstSubRowMessage).text()).toBe('true');
+    const secondSubRowMessage = page.waitForEvent('console');
+    await row21Checkbox.click();
+    expect((await secondSubRowMessage).text()).toBe('false');
+
+    //Works correctly for parent row
+    const firstParentRowMessage = page.waitForEvent('console');
+    await row2Checkbox.click();
+    expect((await firstParentRowMessage).text()).toBe('true');
+    const secondParentRowMessage = page.waitForEvent('console');
+    await row2Checkbox.click();
+    expect((await secondParentRowMessage).text()).toBe('false');
+  });
+
   //#region Helpers for row selection tests
   const filter = async (page: Page) => {
     const filterButton = page.getByLabel('Filter');