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 (
{ width: `${virtualColumn.size}px`, ...directionStyles }} + data-component-name={`ATHeaderContainer-${columnId}`} >
{ const isSortedAscending = column.isSorted && column.isSortedDesc === false; const isSortedDescending = column.isSorted && column.isSortedDesc === true; - const onAfterClose = (e) => { + const onAfterClose: PopoverPropTypes['onClose'] = (e) => { stopPropagation(e); setOpen(false); }; @@ -167,13 +167,13 @@ export const ColumnHeaderModal = (instance: TableInstanceWithPopoverProps) => { }; useEffect(() => { - if (open && ref.current && openerRef.current) { + if (ref.current && openerRef.current) { void customElements.whenDefined(getUi5TagWithSuffix('ui5-popover')).then(() => { ref.current.opener = openerRef.current; ref.current.open = true; }); } - }, [open]); + }, []); return (