From de3c96d32718298d612be97e0a8b296e4908ef40 Mon Sep 17 00:00:00 2001
From: Lukas Harbarth <lukas.harbarth@sap.com>
Date: Thu, 14 Nov 2024 14:56:42 +0100
Subject: [PATCH] fix(AnalyticalTable): block interaction during loading
 (#6602)

---
 .../AnalyticalTable/AnalyticalTable.stories.tsx          | 9 +++++----
 packages/main/src/components/AnalyticalTable/index.tsx   | 3 ++-
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/packages/main/src/components/AnalyticalTable/AnalyticalTable.stories.tsx b/packages/main/src/components/AnalyticalTable/AnalyticalTable.stories.tsx
index a455f7fb047..58d164ce9da 100644
--- a/packages/main/src/components/AnalyticalTable/AnalyticalTable.stories.tsx
+++ b/packages/main/src/components/AnalyticalTable/AnalyticalTable.stories.tsx
@@ -92,13 +92,14 @@ const meta = {
         disableSortBy: true,
         Cell: (instance) => {
           const { cell, row, webComponentsReactProperties } = instance;
-          // disable buttons if overlay is active to prevent focus
-          const isOverlay = webComponentsReactProperties.showOverlay;
+          const { loading, showOverlay } = webComponentsReactProperties;
+          // disable buttons if overlay is active or the table is loading, to prevent focus
+          const disabled = loading || showOverlay;
           // console.log('This is your row data', row.original);
           return (
             <FlexBox>
-              <Button icon="edit" disabled={isOverlay} />
-              <Button icon="delete" disabled={isOverlay} />
+              <Button icon="edit" disabled={disabled} />
+              <Button icon="delete" disabled={disabled} />
             </FlexBox>
           );
         },
diff --git a/packages/main/src/components/AnalyticalTable/index.tsx b/packages/main/src/components/AnalyticalTable/index.tsx
index 7720619cf30..af33b8fa87c 100644
--- a/packages/main/src/components/AnalyticalTable/index.tsx
+++ b/packages/main/src/components/AnalyticalTable/index.tsx
@@ -710,6 +710,7 @@ const AnalyticalTable = forwardRef<AnalyticalTableDomRef, AnalyticalTablePropTyp
               <span />
             </BusyIndicator>
           )}
+          {/*todo: use global CSS once --sapBlockLayer_Opacity is available*/}
           {showOverlay && (
             <>
               <span id={invalidTableTextId} className={classNames.hiddenA11yText} aria-hidden>
@@ -727,7 +728,7 @@ const AnalyticalTable = forwardRef<AnalyticalTableDomRef, AnalyticalTablePropTyp
           <div
             aria-labelledby={titleBarId}
             {...getTableProps()}
-            tabIndex={showOverlay ? -1 : 0}
+            tabIndex={loading || showOverlay ? -1 : 0}
             role="grid"
             aria-rowcount={rows.length}
             aria-colcount={visibleColumns.length}