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,