diff --git a/packages/terra-framework-docs/src/terra-dev-site/test/table/TableSingleRowSelectionAndCollapsibleSections.test.jsx b/packages/terra-framework-docs/src/terra-dev-site/test/table/TableSingleRowSelectionAndCollapsibleSections.test.jsx new file mode 100644 index 0000000000..d0b5e725a6 --- /dev/null +++ b/packages/terra-framework-docs/src/terra-dev-site/test/table/TableSingleRowSelectionAndCollapsibleSections.test.jsx @@ -0,0 +1,156 @@ +import React, { useState, useCallback } from 'react'; +import Table from 'terra-table'; + +const tableData = { + cols: [ + { + id: 'Column-0', displayName: 'Patient', sortIndicator: 'ascending', isSelectable: true, + }, + { + id: 'Column-1', displayName: 'Location', isSelectable: true, + }, + { id: 'Column-2', displayName: 'Illness Severity', isSelectable: true }, + { id: 'Column-3', displayName: 'Visit' }, + { id: 'Column-4', displayName: 'Allergy' }, + { id: 'Column-5', displayName: 'Primary Contact' }, + + ], + sections: [{ + id: 'section-0', + isCollapsible: true, + isCollapsed: false, + text: 'Test Section', + rows: [ + { + id: '1', + cells: [ + { content: 'Fleck, Arthur' }, + { content: '1007-MTN' }, + { content: 'Unstable' }, + { content: 'Inpatient, 2 months' }, + { content: '' }, + { content: 'Quinzell, Harleen' }, + ], + }, + { + id: '2', + cells: [ + { content: 'Wayne, Bruce' }, + { content: '1007-MTN-DR' }, + { content: 'Stable' }, + { content: 'Outpatient, 2 days' }, + { content: 'Phytochemicals' }, + { content: 'Grayson, Richard' }, + ], + }, + ], + }, + { + id: 'section-1', + isCollapsible: true, + isCollapsed: false, + text: 'Test Section #2', + rows: [ + { + id: '3', + cells: [ + { content: 'Parker, Peter' }, + { content: '1007-MTN' }, + { content: 'Unstable' }, + { content: 'Inpatient, 2 months' }, + { content: '' }, + { content: 'Octopus, Doctor' }, + ], + }, + { + id: '4', + cells: [ + { content: 'Stark, Tony' }, + { content: '1007-MTN-DR' }, + { content: 'Stable' }, + { content: 'Outpatient, 2 days' }, + { content: 'Phytochemicals' }, + { content: 'America, Captain' }, + ], + }, + ], + }], +}; + +const TableSingleRowSelectionAndCollapsibleSections = () => { + const rowHeaderIndex = 0; + const { cols } = tableData; + const [tableSections, setTableSections] = useState(tableData.sections); + + const handleSectionSelect = (sectionId) => { + const newSections = [...tableSections]; + const sectionIndex = newSections.findIndex(section => section.id === sectionId); + + if (sectionIndex > -1) { + newSections[sectionIndex].isCollapsed = !newSections[sectionIndex].isCollapsed; + } + + setTableSections(newSections); + }; + + // const onRowSelect = useCallback((rowSelection) => { + // const { rowId } = rowSelection; + + // const newRowData = [...rowData]; + + // const dataRowToUpdate = newRowData.find(row => row.id === rowId); + + // newRowData.forEach((row) => { + // if (row.id !== dataRowToUpdate.id) { + // // eslint-disable-next-line no-return-assign, no-param-reassign + // row.isSelected = false; + // } + // }); + + // dataRowToUpdate.isSelected = !dataRowToUpdate.isSelected; + + // setRowData(newRowData); + // }, [rowData]); + + const onRowSelect = useCallback((rowSelection) => { + const { sectionId, rowId } = rowSelection; + + const newSections = [...tableSections]; + const currentSection = newSections.find(section => section.id === sectionId); + + const currentSectionRows = [...currentSection.rows]; + const dataRowToUpdate = currentSectionRows.find(row => row.id === rowId); + + newSections.forEach((section) => { + const sectionRowData = [...section.rows]; + sectionRowData.forEach((row) => { + if (row.id !== dataRowToUpdate.id) { + // eslint-disable-next-line no-return-assign, no-param-reassign + row.isSelected = false; + } + }); + + // eslint-disable-next-line no-param-reassign + section.rows = sectionRowData; + }); + + dataRowToUpdate.isSelected = !dataRowToUpdate.isSelected; + setTableSections(newSections); + }, [tableSections]); + + return ( + + ); +}; + +export default TableSingleRowSelectionAndCollapsibleSections; diff --git a/packages/terra-menu/CHANGELOG.md b/packages/terra-menu/CHANGELOG.md index 983ae2dce3..3d6c8beb0b 100644 --- a/packages/terra-menu/CHANGELOG.md +++ b/packages/terra-menu/CHANGELOG.md @@ -2,6 +2,9 @@ ## Unreleased +* Added + * Added test for `terra-table` to cover exception occurring with collapsible sections and single row select mode. + ## 6.92.0 - (April 17, 2024) * Changed diff --git a/packages/terra-table/CHANGELOG.md b/packages/terra-table/CHANGELOG.md index b0174493f9..f1c1b0a382 100644 --- a/packages/terra-table/CHANGELOG.md +++ b/packages/terra-table/CHANGELOG.md @@ -2,6 +2,9 @@ ## Unreleased +* Fixed + * Fixed an exception case when using collapsible sections with single selection mode. + ## 5.21.0 - (April 17, 2024) * Added diff --git a/packages/terra-table/src/Table.jsx b/packages/terra-table/src/Table.jsx index 0a1d71f985..a1c277ec02 100644 --- a/packages/terra-table/src/Table.jsx +++ b/packages/terra-table/src/Table.jsx @@ -419,15 +419,21 @@ function Table(props) { let selectionUpdateAriaMessage = ''; if (rowSelectionsAdded.length === 1) { - const selectedRowLabel = tableRef.current.querySelector(`tr[data-row-id='${rowSelectionsAdded[0]}']`).getAttribute('aria-rowindex'); - selectionUpdateAriaMessage = intl.formatMessage({ id: 'Terra.table.row-selection-template' }, { row: selectedRowLabel }); + const selectedRowElement = tableRef.current.querySelector(`tr[data-row-id='${rowSelectionsAdded[0]}']`); + if (selectedRowElement) { + const selectedRowLabel = selectedRowElement.getAttribute('aria-rowindex'); + selectionUpdateAriaMessage = intl.formatMessage({ id: 'Terra.table.row-selection-template' }, { row: selectedRowLabel }); + } } else if (rowSelectionsAdded.length > 1) { selectionUpdateAriaMessage = intl.formatMessage({ id: 'Terra.table.multiple-rows-selected' }, { rowCount: rowSelectionsAdded.length }); } if (rowSelectionsRemoved.length === 1) { - const unselectedRowLabel = tableRef.current.querySelector(`tr[data-row-id='${rowSelectionsRemoved[0]}']`).getAttribute('aria-rowindex'); - selectionUpdateAriaMessage += intl.formatMessage({ id: 'Terra.table.row-selection-cleared-template' }, { row: unselectedRowLabel }); + const unselectedRowElement = tableRef.current.querySelector(`tr[data-row-id='${rowSelectionsRemoved[0]}']`); + if (unselectedRowElement) { + const unselectedRowLabel = unselectedRowElement.getAttribute('aria-rowindex'); + selectionUpdateAriaMessage += intl.formatMessage({ id: 'Terra.table.row-selection-cleared-template' }, { row: unselectedRowLabel }); + } } else if (rowSelectionsRemoved.length > 1) { selectionUpdateAriaMessage += intl.formatMessage({ id: 'Terra.table.multiple-rows-unselected' }, { rowCount: rowSelectionsRemoved.length }); } diff --git a/packages/terra-table/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_large/table-spec/row-single-selection-with-collapsible-sections.png b/packages/terra-table/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_large/table-spec/row-single-selection-with-collapsible-sections.png new file mode 100644 index 0000000000..472af9032a Binary files /dev/null and b/packages/terra-table/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_large/table-spec/row-single-selection-with-collapsible-sections.png differ diff --git a/packages/terra-table/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_medium/table-spec/row-single-selection-with-collapsible-sections.png b/packages/terra-table/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_medium/table-spec/row-single-selection-with-collapsible-sections.png new file mode 100644 index 0000000000..467f9fbf45 Binary files /dev/null and b/packages/terra-table/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_medium/table-spec/row-single-selection-with-collapsible-sections.png differ diff --git a/packages/terra-table/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_large/table-spec/row-single-selection-with-collapsible-sections.png b/packages/terra-table/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_large/table-spec/row-single-selection-with-collapsible-sections.png new file mode 100644 index 0000000000..da2176282d Binary files /dev/null and b/packages/terra-table/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_large/table-spec/row-single-selection-with-collapsible-sections.png differ diff --git a/packages/terra-table/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_medium/table-spec/row-single-selection-with-collapsible-sections.png b/packages/terra-table/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_medium/table-spec/row-single-selection-with-collapsible-sections.png new file mode 100644 index 0000000000..3a0c8203c1 Binary files /dev/null and b/packages/terra-table/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_medium/table-spec/row-single-selection-with-collapsible-sections.png differ diff --git a/packages/terra-table/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_large/table-spec/row-single-selection-with-collapsible-sections.png b/packages/terra-table/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_large/table-spec/row-single-selection-with-collapsible-sections.png new file mode 100644 index 0000000000..f4b404beff Binary files /dev/null and b/packages/terra-table/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_large/table-spec/row-single-selection-with-collapsible-sections.png differ diff --git a/packages/terra-table/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_medium/table-spec/row-single-selection-with-collapsible-sections.png b/packages/terra-table/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_medium/table-spec/row-single-selection-with-collapsible-sections.png new file mode 100644 index 0000000000..8f9656c234 Binary files /dev/null and b/packages/terra-table/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_medium/table-spec/row-single-selection-with-collapsible-sections.png differ diff --git a/packages/terra-table/tests/wdio/table-spec.js b/packages/terra-table/tests/wdio/table-spec.js index 6be32fc22b..be32bd3f69 100644 --- a/packages/terra-table/tests/wdio/table-spec.js +++ b/packages/terra-table/tests/wdio/table-spec.js @@ -294,6 +294,24 @@ Terra.describeViewports('Table', ['medium', 'large'], () => { }); }); + describe('With single row selection and collapsible sections', () => { + const rowSelectionTableSelector = '#table-with-single-row-selection'; + + beforeEach(() => { + browser.url('/raw/tests/cerner-terra-framework-docs/table/table-single-row-selection-and-collapsible-sections'); + }); + + it('validates hovering over a selectable row', () => { + browser.$$('tbody tr')[1].$$('td')[0].click(); + + browser.$$('tbody tr')[0].$$('th button')[0].click(); + + browser.$$('tbody tr')[3].$$('td')[0].click(); + + Terra.validates.element('row-single-selection-with-collapsible-sections', { selector: rowSelectionTableSelector }); + }); + }); + describe('Table with Large Text Data', () => { beforeEach(() => { browser.url('/raw/tests/cerner-terra-framework-docs/table/table-with-large-data');