diff --git a/packages/main/src/components/AnalyticalTable/AnalyticalTable.cy.tsx b/packages/main/src/components/AnalyticalTable/AnalyticalTable.cy.tsx index 86a53f920ef..d9bd6c38a9f 100644 --- a/packages/main/src/components/AnalyticalTable/AnalyticalTable.cy.tsx +++ b/packages/main/src/components/AnalyticalTable/AnalyticalTable.cy.tsx @@ -874,6 +874,11 @@ describe('AnalyticalTable', () => { cy.findByText('Friend Name').click(); cy.findByText('Group').realClick(); + cy.focused() + .should('have.attr', 'data-row-index', '0') + .and('have.attr', 'data-column-index', '2') + .and('have.text', 'Friend Name'); + cy.get('[aria-rowindex="7"] > [aria-colindex="3"] > [title="Expand Node"] > [ui5-icon]').click(); cy.findByText('25').click(); @@ -887,6 +892,13 @@ describe('AnalyticalTable', () => { cy.findByTestId('selectedFlatRowsLength').should('have.text', '1'); cy.findByTestId('selectedRowIds').should('have.text', '{"2":true}'); cy.findByTestId('isSelected').should('have.text', 'false'); + + cy.findByText('Friend Name').click(); + cy.findByText('Ungroup').realClick(); + cy.focused() + .should('have.attr', 'data-row-index', '0') + .and('have.attr', 'data-column-index', '3') + .and('have.text', 'Friend Name'); }); it('useIndeterminateRowSelection - select subRows', () => { diff --git a/packages/main/src/components/AnalyticalTable/ColumnHeader/index.tsx b/packages/main/src/components/AnalyticalTable/ColumnHeader/index.tsx index ab54964c9a0..67eb419943f 100644 --- a/packages/main/src/components/AnalyticalTable/ColumnHeader/index.tsx +++ b/packages/main/src/components/AnalyticalTable/ColumnHeader/index.tsx @@ -5,7 +5,7 @@ import iconFilter from '@ui5/webcomponents-icons/dist/filter.js'; import iconGroup from '@ui5/webcomponents-icons/dist/group-2.js'; import iconSortAscending from '@ui5/webcomponents-icons/dist/sort-ascending.js'; import iconSortDescending from '@ui5/webcomponents-icons/dist/sort-descending.js'; -import { ThemingParameters } from '@ui5/webcomponents-react-base'; +import { ThemingParameters, useIsomorphicLayoutEffect } from '@ui5/webcomponents-react-base'; import { clsx } from 'clsx'; import type { AriaAttributes, @@ -163,6 +163,16 @@ export const ColumnHeader = (props: ColumnHeaderProps) => { } }; + // restore focus after grouping to header cell + const prevIsGrouped = useRef(null); + useIsomorphicLayoutEffect(() => { + const prevOpener = columnHeaderRef.current; + if (column.canGroupBy && prevIsGrouped.current && !popoverOpen && prevOpener) { + (prevOpener.children[0] as HTMLDivElement).focus(); + } + prevIsGrouped.current = column.isGrouped; + }, [popoverOpen]); + if (!column) return null; return (