fix(AnalyticalTable): trap focus inside column header popover while open (#5827)

Fixes #5821

Author: Lukas742

packages/main/src/components/AnalyticalTable/ColumnHeader/ColumnHeaderModal.tsx

@@ -157,17 +157,9 @@ export const ColumnHeaderModal = (props: ColumnHeaderModalProperties) => {
 
   useEffect(() => {
     if (open && ref.current && openerRef.current) {
-      customElements
-        .whenDefined(getUi5TagWithSuffix('ui5-popover'))
-        .then(() => {
-          ref.current.opener = openerRef.current;
-          if (canRenderPortal && open) {
-            ref.current.showAt(openerRef.current);
-          }
-        })
-        .catch(() => {
-          // silently catch
-        });
+      void customElements.whenDefined(getUi5TagWithSuffix('ui5-popover')).then(() => {
+        ref.current.opener = openerRef.current;
+      });
     }
   }, [open, canRenderPortal]);
 
@@ -177,6 +169,7 @@ export const ColumnHeaderModal = (props: ColumnHeaderModalProperties) => {
 
   return createPortal(
     <Popover
+      open={open}
       hideArrow
       horizontalAlign={horizontalAlign}
       placementType={PopoverPlacementType.Bottom}
@@ -185,8 +178,14 @@ export const ColumnHeaderModal = (props: ColumnHeaderModalProperties) => {
       onClick={stopPropagation}
       onAfterClose={onAfterClose}
       onAfterOpen={onAfterOpen}
+      data-component-name="ATHeaderPopover"
     >
-      <List onItemClick={handleSort} ref={listRef} onKeyDown={handleListKeyDown}>
+      <List
+        onItemClick={handleSort}
+        ref={listRef}
+        onKeyDown={handleListKeyDown}
+        data-component-name="ATHeaderPopoverList"
+      >
         {isSortedAscending && (
           <StandardListItem type={ListItemType.Active} icon={iconDecline} data-sort="clear">
             {clearSortingText}

packages/main/src/components/AnalyticalTable/hooks/useKeyboardNavigation.ts

@@ -97,7 +97,14 @@ const useGetTableProps = (tableProps, { instance: { webComponentsReactProperties
 
   const onTableFocus = useCallback(
     (e) => {
-      if (e.target.dataset?.emptyRowCell === 'true' || e.target.dataset.subcomponentActiveElement) {
+      const { dataset } = e.target;
+      if (
+        dataset.emptyRowCell === 'true' ||
+        dataset.subcomponentActiveElement ||
+        // todo: with the new popover API of ui5wc this might not be necessary anymore
+        dataset.componentName === 'ATHeaderPopoverList' ||
+        dataset.componentName === 'ATHeaderPopover'
+      ) {
         return;
       }
       if (e.target.dataset.subcomponent) {