From 18aec859c4bbcefef99b30c8dbb8de8dfdf65d38 Mon Sep 17 00:00:00 2001
From: Lukas Harbarth <lukas.harbarth@sap.com>
Date: Tue, 22 Aug 2023 15:06:58 +0200
Subject: [PATCH] fix(AnalyticalTable): fix keyboard navigation for RTL text
 direction

---
 .../AnalyticalTable/hooks/useKeyboardNavigation.ts       | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/packages/main/src/components/AnalyticalTable/hooks/useKeyboardNavigation.ts b/packages/main/src/components/AnalyticalTable/hooks/useKeyboardNavigation.ts
index bd409dc263a..34ffd17b159 100644
--- a/packages/main/src/components/AnalyticalTable/hooks/useKeyboardNavigation.ts
+++ b/packages/main/src/components/AnalyticalTable/hooks/useKeyboardNavigation.ts
@@ -59,7 +59,7 @@ const navigateFromActiveSubCompItem = (currentlyFocusedCell, e) => {
   setFocus(currentlyFocusedCell, recursiveSubComponentElementSearch(e.target));
 };
 
-const useGetTableProps = (tableProps, { instance: { webComponentsReactProperties, data, columns } }) => {
+const useGetTableProps = (tableProps, { instance: { webComponentsReactProperties, data, columns, state } }) => {
   const { showOverlay, tableRef } = webComponentsReactProperties;
   const currentlyFocusedCell = useRef<HTMLDivElement>(null);
   const noData = data.length === 0;
@@ -141,6 +141,7 @@ const useGetTableProps = (tableProps, { instance: { webComponentsReactProperties
 
   const onKeyboardNavigation = useCallback(
     (e) => {
+      const { isRtl } = state;
       const isActiveItemInSubComponent = e.target.dataset.subcomponentActiveElement;
       // check if target is cell and if so proceed from there
       if (
@@ -226,7 +227,7 @@ const useGetTableProps = (tableProps, { instance: { webComponentsReactProperties
               return;
             }
             const newElement = tableRef.current.querySelector(
-              `div[data-column-index="${columnIndex + 1}"][data-row-index="${rowIndex}"]`
+              `div[data-column-index="${columnIndex + (isRtl ? -1 : 1)}"][data-row-index="${rowIndex}"]`
             );
             if (newElement) {
               setFocus(currentlyFocusedCell, newElement);
@@ -242,7 +243,7 @@ const useGetTableProps = (tableProps, { instance: { webComponentsReactProperties
               return;
             }
             const newElement = tableRef.current.querySelector(
-              `div[data-column-index="${columnIndex - 1}"][data-row-index="${rowIndex}"]`
+              `div[data-column-index="${columnIndex - (isRtl ? -1 : 1)}"][data-row-index="${rowIndex}"]`
             );
             if (newElement) {
               setFocus(currentlyFocusedCell, newElement);
@@ -307,7 +308,7 @@ const useGetTableProps = (tableProps, { instance: { webComponentsReactProperties
         }
       }
     },
-    [currentlyFocusedCell.current, tableRef.current]
+    [currentlyFocusedCell.current, tableRef.current, state?.isRtl]
   );
   if (showOverlay) {
     return tableProps;