fix(AnalyticalTable): don't scroll to top if expandable row is collapsed (#4420)

Fixes #4409

Author: Lukas742

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

@@ -1631,6 +1631,67 @@ describe('AnalyticalTable', () => {
     cy.get('[data-column-id="name"]').should('have.attr', 'aria-sort', 'descending').and('not.have.attr', 'aria-label');
   });
 
+  it("Expandable: don't scroll when expanded/collapsed", () => {
+    cy.mount(<AnalyticalTable data={[...dataTree, ...dataTree]} columns={columns} isTreeTable visibleRows={5} />);
+    cy.findAllByText('Katy Bradshaw').eq(1).trigger('keydown', {
+      key: 'Enter'
+    });
+    cy.get('[data-component-name="AnalyticalTableBody"]').scrollTo('bottom');
+    cy.findByText('Carol Perez').trigger('keydown', {
+      key: 'Enter'
+    });
+    cy.get('[data-component-name="AnalyticalTableBody"]').should('not.equal', 0);
+    cy.findByText('Carol Perez').trigger('keydown', {
+      key: 'Enter'
+    });
+    cy.get('[data-component-name="AnalyticalTableBody"]').invoke('scrollTop').should('not.equal', 0);
+
+    cy.mount(<AnalyticalTable data={[...data, ...data]} columns={columns} visibleRows={5} groupable />);
+    cy.findByText('Name').click();
+    cy.findByText('Group').click();
+    cy.findByText('A (2)').trigger('keydown', {
+      key: 'Enter'
+    });
+    cy.findByText('B (2)').trigger('keydown', {
+      key: 'Enter'
+    });
+    cy.get('[data-component-name="AnalyticalTableBody"]').scrollTo('bottom');
+    cy.findByText('C (2)').trigger('keydown', {
+      key: 'Enter'
+    });
+    cy.get('[data-component-name="AnalyticalTableBody"]').invoke('scrollTop').should('not.equal', 0);
+    cy.get('[data-component-name="AnalyticalTableBody"]').scrollTo('bottom');
+    cy.findByText('C (2)').trigger('keydown', {
+      key: 'Enter'
+    });
+    cy.get('[data-component-name="AnalyticalTableBody"]').invoke('scrollTop').should('not.equal', 0);
+
+    const renderRowSubComponent = () => {
+      return (
+        <div style={{ height: '80px' }} title="subcomponent">
+          SubComponent
+        </div>
+      );
+    };
+    cy.mount(<AnalyticalTable data={data} columns={columns} renderRowSubComponent={renderRowSubComponent} />);
+    cy.findByText('A').trigger('keydown', {
+      key: 'Enter'
+    });
+    cy.findByText('B').trigger('keydown', {
+      key: 'Enter'
+    });
+    cy.get('[data-component-name="AnalyticalTableBody"]').scrollTo('bottom');
+    cy.findByText('X').trigger('keydown', {
+      key: 'Enter'
+    });
+    cy.get('[data-component-name="AnalyticalTableBody"]').invoke('scrollTop').should('not.equal', 0);
+    cy.get('[data-component-name="AnalyticalTableBody"]').scrollTo('bottom');
+    cy.findByText('X').trigger('keydown', {
+      key: 'Enter'
+    });
+    cy.get('[data-component-name="AnalyticalTableBody"]').invoke('scrollTop').should('not.equal', 0);
+  });
+
   cypressPassThroughTestsFactory(AnalyticalTable, { data, columns });
 });
 

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

@@ -413,6 +413,7 @@ export const Subcomponents: Story = {
     };
     return (
       <AnalyticalTable
+        {...args}
         data={args.data}
         columns={args.columns}
         renderRowSubComponent={renderRowSubComponent}

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

@@ -1,8 +1,27 @@
 import { enrichEventWithDetails } from '@ui5/webcomponents-react-base';
 import { clsx } from 'clsx';
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, { MutableRefObject, useCallback, useEffect, useRef, useState } from 'react';
+import { AnalyticalTablePropTypes } from '../index';
 
-export const VirtualTableBodyContainer = (props) => {
+interface VirtualTableBodyContainerProps {
+  tableBodyHeight: number;
+  totalColumnsWidth: number;
+  children: any;
+  parentRef: MutableRefObject<HTMLDivElement>;
+  classes: Record<string, string>;
+  infiniteScroll?: AnalyticalTablePropTypes['infiniteScroll'];
+  infiniteScrollThreshold?: AnalyticalTablePropTypes['infiniteScrollThreshold'];
+  onLoadMore: AnalyticalTablePropTypes['onLoadMore'];
+  rows: Record<string, any>[];
+  internalRowHeight: number;
+  handleExternalScroll: AnalyticalTablePropTypes['onTableScroll'];
+  visibleRows: number;
+  popInRowHeight: number;
+  rowCollapsedFlag?: boolean;
+  dispatch: (e: { type: string; payload?: any }) => void;
+}
+
+export const VirtualTableBodyContainer = (props: VirtualTableBodyContainerProps) => {
   const {
     tableBodyHeight,
     totalColumnsWidth,
@@ -16,7 +35,9 @@ export const VirtualTableBodyContainer = (props) => {
     internalRowHeight,
     handleExternalScroll,
     visibleRows,
-    popInRowHeight
+    popInRowHeight,
+    rowCollapsedFlag,
+    dispatch
   } = props;
   const [isMounted, setIsMounted] = useState(false);
 
@@ -35,12 +56,19 @@ export const VirtualTableBodyContainer = (props) => {
 
   useEffect(() => {
     if (prevDataLength.current > dataLength) {
-      firedInfiniteLoadEvents.current.clear();
-      parentRef.current.scrollTop = 0;
-      lastScrollTop.current = 0;
+      if (rowCollapsedFlag) {
+        dispatch({
+          type: 'ROW_COLLAPSED_FLAG',
+          payload: false
+        });
+      } else {
+        firedInfiniteLoadEvents.current.clear();
+        parentRef.current.scrollTop = 0;
+        lastScrollTop.current = 0;
+      }
     }
     prevDataLength.current = dataLength;
-  }, [dataLength]);
+  }, [dataLength, rowCollapsedFlag]);
 
   const onScroll = useCallback(
     (event) => {
@@ -55,12 +83,12 @@ export const VirtualTableBodyContainer = (props) => {
         if (rows.length - currentLastRow < infiniteScrollThreshold) {
           if (!firedInfiniteLoadEvents.current.has(rows.length)) {
             const rootNodes = rows.filter((row) => row.depth === 0);
-            onLoadMore({
-              detail: {
+            onLoadMore(
+              enrichEventWithDetails(event, {
                 rowCount: rootNodes.length,
                 totalRowCount: rows.length
-              }
-            });
+              })
+            );
           }
           firedInfiniteLoadEvents.current.add(rows.length);
         }

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

@@ -1,6 +1,7 @@
 import { enrichEventWithDetails } from '@ui5/webcomponents-react-base';
 
 const getToggleRowExpandedProps = (rowProps, { row, instance }) => {
+  const { dispatch } = instance;
   const { onRowExpandChange, isTreeTable, renderRowSubComponent } = instance.webComponentsReactProperties;
   const onClick = (e, noPropagation = true) => {
     if (noPropagation) {
@@ -13,6 +14,12 @@ const getToggleRowExpandedProps = (rowProps, { row, instance }) => {
       column = row.cells.find((cell) => cell.column.id === row.groupByID).column;
     }
 
+    if (row.isExpanded) {
+      dispatch({
+        type: 'ROW_COLLAPSED_FLAG',
+        payload: true
+      });
+    }
     onRowExpandChange(enrichEventWithDetails(e, { row, column }));
   };
   const onKeyDown = (e) => {

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

@@ -1097,6 +1097,8 @@ const AnalyticalTable = forwardRef<AnalyticalTableDomRef, AnalyticalTablePropTyp
             )}
             {rawData?.length > 0 && tableRef.current && (
               <VirtualTableBodyContainer
+                rowCollapsedFlag={tableState.rowCollapsed}
+                dispatch={dispatch}
                 tableBodyHeight={tableBodyHeight}
                 totalColumnsWidth={totalColumnsWidth}
                 parentRef={parentRef}

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

@@ -49,6 +49,8 @@ export const stateReducer = (prevState, action) => {
       return { ...prevState, tableColResized: payload };
     case 'SELECT_ROW_CB':
       return { ...prevState, selectedRowPayload: payload };
+    case 'ROW_COLLAPSED_FLAG':
+      return { ...prevState, rowCollapsed: payload };
     default:
       return prevState;
   }