diff --git a/packages/main/src/components/AnalyticalTable/hooks/useKeyboardNavigation.ts b/packages/main/src/components/AnalyticalTable/hooks/useKeyboardNavigation.ts index de3aaca6155..28854426c87 100644 --- a/packages/main/src/components/AnalyticalTable/hooks/useKeyboardNavigation.ts +++ b/packages/main/src/components/AnalyticalTable/hooks/useKeyboardNavigation.ts @@ -61,7 +61,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(null); const noData = data.length === 0; @@ -143,6 +143,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 ( @@ -228,7 +229,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); @@ -244,7 +245,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); @@ -309,7 +310,7 @@ const useGetTableProps = (tableProps, { instance: { webComponentsReactProperties } } }, - [currentlyFocusedCell.current, tableRef.current] + [currentlyFocusedCell.current, tableRef.current, state?.isRtl] ); if (showOverlay) { return tableProps;