diff --git a/packages/ibm-products/src/components/Datagrid/Datagrid.test.js b/packages/ibm-products/src/components/Datagrid/Datagrid.test.js
index 2c869451f4..b7767dcce8 100644
--- a/packages/ibm-products/src/components/Datagrid/Datagrid.test.js
+++ b/packages/ibm-products/src/components/Datagrid/Datagrid.test.js
@@ -371,7 +371,7 @@ const ExpandedRow = ({ ...rest } = {}) => {
useExpandedRow
);
- return ;
+ return ;
};
const SelectItemsInAllPages = ({ ...rest } = {}) => {
@@ -1434,29 +1434,36 @@ describe(componentName, () => {
fireEvent.click(clickableRow);
});
- function clickRow(rowNumber) {
+ async function clickRow(rowNumber, triggerAnotherExpander) {
+ const user = userEvent.setup({ delay: null });
+ const { click, hover, unhover } = user;
const rows = screen.getAllByRole('row');
const bodyRows = rows.filter(
(r) =>
- !r.classList.contains('c4p--datagrid__head') &&
- !r.classList.contains('c4p--datagrid__expanded-row')
+ !r.classList.contains(`${pkg.prefix}--datagrid__head`) &&
+ !r.classList.contains(`${pkg.prefix}--datagrid__expanded-row`)
);
const row = bodyRows[rowNumber];
- const rowExpander = row.querySelector(`button[aria-label="Expand row"]`);
- fireEvent.click(rowExpander);
+ const rowExpander = within(row).getByLabelText('Expand row');
+ await click(rowExpander);
expect(row.nextElementSibling).toHaveClass(`${blockClass}__expanded-row`);
expect(row.nextElementSibling.textContent).toEqual(
`Content for ${rowNumber}`
);
- fireEvent.mouseOver(row.nextElementSibling);
- fireEvent.mouseLeave(row.nextElementSibling);
+ hover(row.nextElementSibling);
+ unhover(row.nextElementSibling);
- const rowExpanderCollapse = row.querySelector(
- `button[aria-label="Collapse row"]`
- );
+ if (triggerAnotherExpander) {
+ const nextRow = bodyRows[rowNumber + 1];
+ const nextRowExpanderExpand =
+ within(nextRow).getByLabelText('Expand row');
+ fireEvent.click(nextRowExpanderExpand);
+ return;
+ }
+ const rowExpanderCollapse = within(row).getByLabelText('Collapse row');
fireEvent.click(rowExpanderCollapse);
}
@@ -1464,7 +1471,7 @@ describe(componentName, () => {
render();
clickRow(1);
clickRow(4);
- clickRow(8);
+ clickRow(8, true);
});
function hideSelectAll(rowNumber) {
diff --git a/packages/ibm-products/src/components/Datagrid/useFocusRowExpander.js b/packages/ibm-products/src/components/Datagrid/useFocusRowExpander.js
index aa7cf3c68b..594bd1f345 100644
--- a/packages/ibm-products/src/components/Datagrid/useFocusRowExpander.js
+++ b/packages/ibm-products/src/components/Datagrid/useFocusRowExpander.js
@@ -13,7 +13,7 @@ import { useEffect } from 'react';
// flow.
export const useFocusRowExpander = ({
instance,
- lastExpandedRowIndex,
+ lastExpandedRowIndex = 0,
blockClass,
activeElement,
}) => {
@@ -25,20 +25,18 @@ export const useFocusRowExpander = ({
}
const tableId = instance?.tableId;
const rowElements = document.querySelectorAll(`#${tableId} tbody tr`);
- if (lastExpandedRowIndex) {
- const rowElementsArray = Array.from(rowElements);
- const activeRow = rowElementsArray.filter((r) => {
- if (r.getAttribute('data-nested-row-id') === lastExpandedRowIndex) {
- return r;
- }
- return null;
- });
- if (activeRow.length) {
- const rowExpander = activeRow[0].querySelector(
- `.${blockClass}__row-expander`
- );
- rowExpander.focus();
+ const rowElementsArray = Array.from(rowElements);
+ const activeRow = rowElementsArray.filter((r) => {
+ if (r.getAttribute('data-nested-row-id') === lastExpandedRowIndex) {
+ return r;
}
+ return null;
+ });
+ if (activeRow.length) {
+ const rowExpander = activeRow[0].querySelector(
+ `.${blockClass}__row-expander`
+ );
+ rowExpander.focus();
}
}, [
instance?.tableId,