fix(AnalyticalTable): don't scroll when calling toggleRowExpanded (#5296)

Fixes #5181

Author: Lukas742

packages/main/src/components/AnalyticalTable/AnalyticalTable.cy.tsx

@@ -1900,6 +1900,34 @@ describe('AnalyticalTable', () => {
   });
 
   it("Expandable: don't scroll when expanded/collapsed", () => {
+    const TestComp = () => {
+      const tableInstanceRef = useRef();
+      return (
+        <>
+          <button
+            onClick={() => {
+              tableInstanceRef.current.toggleRowExpanded('6');
+            }}
+          >
+            toggle row
+          </button>
+          <AnalyticalTable
+            data={[
+              ...dataTree,
+              ...dataTree,
+              ...dataTree,
+              { name: 'toggle', subRows: [{ name: 'toggled' }] },
+              ...dataTree,
+              ...dataTree
+            ]}
+            columns={columns}
+            isTreeTable
+            visibleRows={5}
+            tableInstance={tableInstanceRef}
+          />
+        </>
+      );
+    };
     cy.mount(<AnalyticalTable data={[...dataTree, ...dataTree]} columns={columns} isTreeTable visibleRows={5} />);
     cy.findAllByText('Katy Bradshaw').eq(1).trigger('keydown', {
       key: 'Enter'
@@ -1960,6 +1988,16 @@ describe('AnalyticalTable', () => {
       force: true
     });
     cy.get('[data-component-name="AnalyticalTableBody"]').invoke('scrollTop').should('not.equal', 0);
+
+    cy.mount(<TestComp />);
+    cy.get('[data-component-name="AnalyticalTableBody"]').scrollTo('center');
+    cy.findByText('toggled').should('not.exist');
+    cy.findByText('toggle row').click();
+    cy.findByText('toggled').should('be.visible');
+    cy.get('[data-component-name="AnalyticalTableBody"]').invoke('scrollTop').should('not.equal', 0);
+    cy.findByText('toggle row').click();
+    cy.findByText('toggled').should('not.exist');
+    cy.get('[data-component-name="AnalyticalTableBody"]').invoke('scrollTop').should('not.equal', 0);
   });
 
   it('multi-sort', () => {

packages/main/src/components/AnalyticalTable/TableBody/VirtualTableBodyContainer.tsx

@@ -55,6 +55,7 @@ export const VirtualTableBodyContainer = (props: VirtualTableBodyContainerProps)
 
   useEffect(() => {
     if (prevDataLength.current > dataLength) {
+      // if prevData is larger because a row was collapsed, no scroll should be executed
       if (rowCollapsedFlag) {
         dispatch({
           type: 'ROW_COLLAPSED_FLAG',

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

@@ -2,7 +2,7 @@ import { enrichEventWithDetails } from '@ui5/webcomponents-react-base';
 import type { ReactTableHooks } from '../types/index.js';
 
 const getToggleRowExpandedProps = (rowProps, { row, instance, userProps }) => {
-  const { dispatch, manualGroupBy } = instance;
+  const { manualGroupBy } = instance;
   const { onRowExpandChange, isTreeTable, renderRowSubComponent, alwaysShowSubComponent } =
     instance.webComponentsReactProperties;
   const onClick = (e, noPropagation = true) => {
@@ -19,13 +19,6 @@ const getToggleRowExpandedProps = (rowProps, { row, instance, userProps }) => {
       }
     }
 
-    if (row.isExpanded) {
-      dispatch({
-        type: 'ROW_COLLAPSED_FLAG',
-        payload: true
-      });
-    }
-
     onRowExpandChange(
       enrichEventWithDetails(e, {
         row,

packages/main/src/components/AnalyticalTable/tableReducer/stateReducer.ts

@@ -1,11 +1,11 @@
 import { actions } from 'react-table';
 
-export const stateReducer = (prevState, action) => {
+export const stateReducer = (state, action, _prevState, instance) => {
   const { payload } = action;
 
-  if (prevState.isRtl && action.type === actions.columnResizing) {
+  if (state.isRtl && action.type === actions.columnResizing) {
     const { clientX } = action;
-    const { startX, columnWidth, headerIdWidths } = prevState.columnResizing;
+    const { startX, columnWidth, headerIdWidths } = state.columnResizing;
 
     const deltaX = startX - clientX;
     const percentageDeltaX = deltaX / columnWidth;
@@ -17,45 +17,53 @@ export const stateReducer = (prevState, action) => {
     });
 
     return {
-      ...prevState,
+      ...state,
       columnResizing: {
-        ...prevState.columnResizing,
+        ...state.columnResizing,
         columnWidths: {
-          ...prevState.columnResizing.columnWidths,
+          ...state.columnResizing.columnWidths,
           ...newColumnWidths
         }
       }
     };
   }
-
   switch (action.type) {
+    case 'toggleRowExpanded':
+      // this flag disables scrolling to the top of the table if a table is collapsed
+      if (!state.expanded[action.id]) {
+        instance.dispatch({
+          type: 'ROW_COLLAPSED_FLAG',
+          payload: true
+        });
+      }
+      return state;
     case 'TABLE_RESIZE':
-      return { ...prevState, tableClientWidth: payload.tableClientWidth };
+      return { ...state, tableClientWidth: payload.tableClientWidth };
     case 'VISIBLE_ROWS':
-      return { ...prevState, visibleRows: payload.visibleRows };
+      return { ...state, visibleRows: payload.visibleRows };
     case 'TABLE_SCROLLING_ENABLED':
-      return { ...prevState, isScrollable: payload.isScrollable };
+      return { ...state, isScrollable: payload.isScrollable };
     case 'SET_SELECTED_ROW_IDS':
-      return { ...prevState, selectedRowIds: payload.selectedRowIds };
+      return { ...state, selectedRowIds: payload.selectedRowIds };
     case 'SET_POPIN_COLUMNS':
-      return { ...prevState, popInColumns: payload };
+      return { ...state, popInColumns: payload };
     case 'INTERACTIVE_ROWS_HAVE_POPIN':
-      return { ...prevState, interactiveRowsHavePopIn: payload };
+      return { ...state, interactiveRowsHavePopIn: payload };
     case 'IS_RTL':
-      return { ...prevState, isRtl: payload.isRtl };
+      return { ...state, isRtl: payload.isRtl };
     case 'SUB_COMPONENTS_HEIGHT':
-      return { ...prevState, subComponentsHeight: payload };
+      return { ...state, subComponentsHeight: payload };
     case 'TABLE_COL_RESIZED':
-      return { ...prevState, tableColResized: payload };
+      return { ...state, tableColResized: payload };
     case 'SELECT_ROW_CB':
-      return { ...prevState, selectedRowPayload: payload };
+      return { ...state, selectedRowPayload: payload };
     case 'ROW_COLLAPSED_FLAG':
-      return { ...prevState, rowCollapsed: payload };
+      return { ...state, rowCollapsed: payload };
     case 'COLUMN_DND_START':
-      return { ...prevState, dndColumn: payload };
+      return { ...state, dndColumn: payload };
     case 'COLUMN_DND_END':
-      return { ...prevState, dndColumn: '' };
+      return { ...state, dndColumn: '' };
     default:
-      return prevState;
+      return state;
   }
 };