fix(AnalyticalTable): restore focus when ungrouping a column (#7299)

Fixes #7284

Author: Lukas742

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', () => {

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 (
     <div
@@ -174,6 +184,7 @@ export const ColumnHeader = (props: ColumnHeaderProps) => {
         width: `${virtualColumn.size}px`,
         ...directionStyles
       }}
+      data-component-name={`ATHeaderContainer-${columnId}`}
     >
       <div
         ref={columnVirtualizer.measureElement}

packages/main/src/components/AnalyticalTable/defaults/Column/ColumnHeaderModal.tsx

@@ -26,7 +26,7 @@ import { Icon } from '../../../../webComponents/Icon/index.js';
 import { List } from '../../../../webComponents/List/index.js';
 import { ListItemCustom } from '../../../../webComponents/ListItemCustom/index.js';
 import { ListItemStandard } from '../../../../webComponents/ListItemStandard/index.js';
-import type { PopoverDomRef } from '../../../../webComponents/Popover/index.js';
+import type { PopoverDomRef, PopoverPropTypes } from '../../../../webComponents/Popover/index.js';
 import { Popover } from '../../../../webComponents/Popover/index.js';
 import { Text } from '../../../../webComponents/Text/index.js';
 import { FlexBox } from '../../../FlexBox/index.js';
@@ -128,7 +128,7 @@ export const ColumnHeaderModal = (instance: TableInstanceWithPopoverProps) => {
   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 (
     <Popover