fix(ObjectPage): prevent jumping of active tab when selecting section (#7395)

Fixes #7038

Author: Lukas742

cypress/support/commands.tsx

@@ -37,6 +37,19 @@ declare global {
           position?: Cypress.PositionType;
         },
       ): Chainable<Element>;
+      /**
+       * Asserts that the element never gains the given attribute.
+       *
+       * __Note:__ An error is thrown if the attribute is not found, therefore it does not block the test if the subject
+       * never includes the given attribute.
+       *
+       *
+       * @param attributeName - The name of the attribute which must not appear.
+       * @param observerTime - How long (in ms) to watch for mutations (default: 500).
+       * @example
+       * cy.get('button').shouldNeverHaveAttribute('disabled', 1000);
+       */
+      shouldNeverHaveAttribute(attributeName: string, observerTime?: number): Chainable<JQuery<HTMLElement>>;
     }
   }
 }
@@ -66,3 +79,36 @@ Cypress.Commands.add(
     chainable.then(() => done(new Error('Expected element NOT to be clickable, but click() succeeded')));
   },
 );
+
+Cypress.Commands.add(
+  'shouldNeverHaveAttribute',
+  { prevSubject: 'element' },
+  (subject, attributeName, observerTime = 500) => {
+    cy.wrap(subject).then(($el) => {
+      const el = $el[0];
+      const observer = new MutationObserver((mutations) => {
+        for (const mutation of mutations) {
+          if (mutation.attributeName === attributeName) {
+            Cypress.log({
+              name: 'shouldNeverHaveAttribute',
+              message: `${attributeName} was found!`,
+              consoleProps: () => ({
+                attributeName,
+                element: el,
+              }),
+            });
+
+            observer.disconnect();
+            throw new Error(`${attributeName} was found!`);
+          }
+        }
+      });
+
+      observer.observe(el, { attributes: true });
+
+      setTimeout(() => {
+        observer.disconnect();
+      }, observerTime);
+    });
+  },
+);

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

@@ -46,6 +46,8 @@ import {
 } from '../..';
 import { cypressPassThroughTestsFactory } from '@/cypress/support/utils';
 
+const arbitraryCharsId = `~\`!1@#$%^&*()-_+={}[]:;"'z,<.>/?|♥`;
+
 describe('ObjectPage', () => {
   [ObjectPageMode.Default, ObjectPageMode.IconTabBar].forEach((mode) => {
     it(`dynamic children selection (mode: ${mode})`, () => {
@@ -360,16 +362,10 @@ describe('ObjectPage', () => {
   it('scroll to sections - default mode', () => {
     document.body.style.margin = '0px';
     cy.mount(
-      <ObjectPage
-        data-testid="op"
-        titleArea={DPTitle}
-        headerArea={DPContent}
-        style={{ height: '100vh', scrollBehavior: 'auto' }}
-      >
+      <ObjectPage data-testid="op" titleArea={DPTitle} headerArea={DPContent} style={{ height: '100vh' }}>
         {OPContent}
       </ObjectPage>,
     );
-
     cy.wait(200);
 
     // first titleText should never be displayed (not.be.visible doesn't work here - only invisible for sighted users)
@@ -382,6 +378,9 @@ describe('ObjectPage', () => {
     cy.findByText('Test').should('be.visible');
 
     cy.get('[ui5-tabcontainer]').findUi5TabByText('Employment').realClick();
+    cy.get('[data-section-id="test"]').shouldNeverHaveAttribute('selected');
+    cy.get('[data-section-id="personal"]').shouldNeverHaveAttribute('selected');
+    cy.get(`[ui5-tab][data-index="3"]`).should('have.attr', 'selected');
     cy.findByText('Employment').should('be.visible');
 
     cy.wait(200);
@@ -404,6 +403,8 @@ describe('ObjectPage', () => {
     cy.realPress('ArrowDown');
     cy.realPress('ArrowDown');
     cy.realPress('Enter');
+    cy.get('[data-section-id="goals"]').shouldNeverHaveAttribute('selected');
+    cy.get('[data-section-id="personal"]').shouldNeverHaveAttribute('selected');
     cy.findByText('Job Relationship').should('be.visible');
 
     cy.mount(
@@ -412,7 +413,7 @@ describe('ObjectPage', () => {
         titleArea={DPTitle}
         headerArea={DPContent}
         footerArea={Footer}
-        style={{ height: '100vh', scrollBehavior: 'auto' }}
+        style={{ height: '100vh' }}
       >
         {OPContent}
       </ObjectPage>,
@@ -433,11 +434,15 @@ describe('ObjectPage', () => {
     cy.wait(200);
     //fallback click
     cy.get('[ui5-tabcontainer]').findUi5TabByText('Employment').realClick();
+    cy.get('[data-section-id="test"]').shouldNeverHaveAttribute('selected');
+    cy.get('[data-section-id="personal"]').shouldNeverHaveAttribute('selected');
     cy.findByTestId('footer').should('be.visible');
     cy.findByText('Employment').should('be.visible');
     cy.findByText('Job Information').should('be.visible');
 
     cy.get('[ui5-tabcontainer]').findUi5TabByText('Goals').click();
+    cy.get('[data-section-id="test"]').shouldNeverHaveAttribute('selected', 300);
+    cy.get('[data-section-id="personal"]').shouldNeverHaveAttribute('selected');
     cy.findByText('Test').should('be.visible');
     cy.findByTestId('footer').should('be.visible');
 
@@ -447,6 +452,8 @@ describe('ObjectPage', () => {
     cy.realPress('ArrowDown');
     cy.realPress('ArrowDown');
     cy.realPress('Enter');
+    cy.get('[data-section-id="personal"]').shouldNeverHaveAttribute('selected');
+    cy.get(`[ui5-tab][data-index="3"]`).should('have.attr', 'selected');
     // wait for scroll
     cy.wait(200);
     cy.findByText('Job Relationship').should('be.visible');
@@ -459,7 +466,7 @@ describe('ObjectPage', () => {
         titleArea={DPTitle}
         headerArea={DPContent}
         footerArea={Footer}
-        style={{ height: '100vh', scrollBehavior: 'auto' }}
+        style={{ height: '100vh' }}
       >
         {OPContent}
         <ObjectPageSection aria-label="Long Section" id="long-section" titleText="Long Section">
@@ -487,6 +494,9 @@ describe('ObjectPage', () => {
     cy.wait(50);
     cy.realPress('ArrowDown');
     cy.realPress('Enter');
+    cy.get('[data-section-id="test"]').shouldNeverHaveAttribute('selected');
+    cy.get('[data-section-id="personal"]').shouldNeverHaveAttribute('selected');
+    cy.get(`[ui5-tab][data-index="3"]`).shouldNeverHaveAttribute('selected');
     // wait for scroll
     cy.wait(200);
     cy.findByText('Start SubSection2').should('be.visible');
@@ -501,7 +511,7 @@ describe('ObjectPage', () => {
         titleArea={DPTitle}
         headerArea={DPContent}
         footerArea={Footer}
-        style={{ height: '100vh', scrollBehavior: 'auto' }}
+        style={{ height: '100vh' }}
       >
         {OPContent}
         <ObjectPageSection aria-label="Long Section" id="long-section" titleText="Long Section">
@@ -1164,7 +1174,7 @@ describe('ObjectPage', () => {
         .its('secondCall.args[0].detail')
         .should('deep.equal', {
           sectionIndex: 3,
-          sectionId: `~\`!1@#$%^&*()-_+={}[]:;"'z,<.>/?|♥`,
+          sectionId: arbitraryCharsId,
           subSectionId: 'employment-job-information',
         });
       cy.get('@sectionChangeSpy').should('not.have.been.called');
@@ -1505,7 +1515,7 @@ const OPContent = [
       </div>
     </ObjectPageSubSection>
   </ObjectPageSection>,
-  <ObjectPageSection key="3" titleText="Employment" id={`~\`!1@#$%^&*()-_+={}[]:;"'z,<.>/?|♥`} aria-label="Employment">
+  <ObjectPageSection key="3" titleText="Employment" id={arbitraryCharsId} aria-label="Employment">
     <ObjectPageSubSection titleText="Job Information" id="employment-job-information" aria-label="Job Information">
       <div style={{ height: '100px', width: '100%', background: 'orange' }}>
         <span data-testid="employment-job-information-content">employment-job-information-content</span>

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

@@ -25,8 +25,14 @@ import type { ObjectPageSubSectionPropTypes } from '../ObjectPageSubSection/inde
 import { CollapsedAvatar } from './CollapsedAvatar.js';
 import { classNames, styleData } from './ObjectPage.module.css.js';
 import { getSectionById, getSectionElementById } from './ObjectPageUtils.js';
-import type { ObjectPageDomRef, ObjectPagePropTypes, ObjectPageTitlePropsWithDataAttributes } from './types/index.js';
+import type {
+  HandleOnSectionSelectedType,
+  ObjectPageDomRef,
+  ObjectPagePropTypes,
+  ObjectPageTitlePropsWithDataAttributes,
+} from './types/index.js';
 import { useHandleTabSelect } from './useHandleTabSelect.js';
+import { useOnScrollEnd } from './useOnScrollEnd.js';
 
 const ObjectPageCssVariables = {
   headerDisplay: '--_ui5wcr_ObjectPage_header_display',
@@ -76,6 +82,7 @@ const ObjectPage = forwardRef<ObjectPageDomRef, ObjectPagePropTypes>((props, ref
   const [internalSelectedSectionId, setInternalSelectedSectionId] = useState<string | undefined>(
     selectedSectionId ?? firstSectionId,
   );
+  const [tabSelectId, setTabSelectId] = useState<null | string>(null);
 
   const isProgrammaticallyScrolled = useRef(false);
   const [componentRef, objectPageRef] = useSyncRef(ref);
@@ -98,6 +105,7 @@ const ObjectPage = forwardRef<ObjectPageDomRef, ObjectPagePropTypes>((props, ref
   const [currentTabModeSection, setCurrentTabModeSection] = useState(null);
   const [toggledCollapsedHeaderWasVisible, setToggledCollapsedHeaderWasVisible] = useState(false);
   const sections = mode === ObjectPageMode.IconTabBar ? currentTabModeSection : children;
+  const scrollEndHandler = useOnScrollEnd({ objectPageRef, setTabSelectId });
 
   useEffect(() => {
     const currentSection =
@@ -232,7 +240,7 @@ const ObjectPage = forwardRef<ObjectPageDomRef, ObjectPagePropTypes>((props, ref
   };
 
   // section was selected by clicking on the tab bar buttons
-  const handleOnSectionSelected = (targetEvent, newSelectionSectionId, index: number | string, section) => {
+  const handleOnSectionSelected: HandleOnSectionSelectedType = (targetEvent, newSelectionSectionId, index, section) => {
     isProgrammaticallyScrolled.current = true;
     debouncedOnSectionChange.cancel();
     setSelectedSubSectionId(undefined);
@@ -242,6 +250,7 @@ const ObjectPage = forwardRef<ObjectPageDomRef, ObjectPagePropTypes>((props, ref
       }
       return newSelectionSectionId;
     });
+    setTabSelectId(newSelectionSectionId);
     scrollEvent.current = targetEvent;
     fireOnSelectedChangedEvent(targetEvent, index, newSelectionSectionId, section);
   };
@@ -527,6 +536,7 @@ const ObjectPage = forwardRef<ObjectPageDomRef, ObjectPagePropTypes>((props, ref
   const onObjectPageScroll: UIEventHandler<HTMLDivElement> = useCallback(
     (e) => {
       const target = e.target as HTMLDivElement;
+      scrollEndHandler(e);
       if (!isToggledRef.current) {
         isToggledRef.current = true;
       }
@@ -583,8 +593,8 @@ const ObjectPage = forwardRef<ObjectPageDomRef, ObjectPagePropTypes>((props, ref
     debouncedOnSectionChange,
     scrollTimeout,
     setSelectedSubSectionId,
+    setTabSelectId,
   });
-
   const objectPageStyles: CSSProperties = {
     ...style,
   };
@@ -691,7 +701,11 @@ const ObjectPage = forwardRef<ObjectPageDomRef, ObjectPagePropTypes>((props, ref
                   data-index={index}
                   data-section-id={section.props.id}
                   text={section.props.titleText}
-                  selected={internalSelectedSectionId === section.props?.id || undefined}
+                  selected={
+                    (tabSelectId && tabSelectId === section.props?.id) ||
+                    (!tabSelectId && internalSelectedSectionId === section.props?.id) ||
+                    undefined
+                  }
                   items={subTabs.map((item) => {
                     if (!isValidElement(item)) {
                       return null;

packages/main/src/components/ObjectPage/types/index.ts

@@ -155,3 +155,10 @@ export interface ObjectPageDomRef extends HTMLDivElement {
    */
   toggleHeaderArea: (snapped?: boolean) => void;
 }
+
+export type HandleOnSectionSelectedType = (
+  targetEvent: Event | Record<string, never>,
+  newSelectionSectionId: string,
+  index: number | string,
+  section: HTMLElement,
+) => void;

packages/main/src/components/ObjectPage/useHandleTabSelect.ts

@@ -22,6 +22,7 @@ interface UseHandleTabSelectProps {
   debouncedOnSectionChange: ReturnType<typeof debounce>;
   scrollTimeout: RefObject<number>;
   setSelectedSubSectionId: Dispatch<SetStateAction<string>>;
+  setTabSelectId: Dispatch<SetStateAction<string | null>>;
 }
 
 export const useHandleTabSelect = ({
@@ -39,6 +40,7 @@ export const useHandleTabSelect = ({
   debouncedOnSectionChange,
   scrollTimeout,
   setSelectedSubSectionId,
+  setTabSelectId,
 }: UseHandleTabSelectProps) => {
   const [onSectionSelectedArgs, setOnSectionSelectedArgs] = useState<
     | false
@@ -52,8 +54,8 @@ export const useHandleTabSelect = ({
 
   const handleOnSubSectionSelected = (e) => {
     isProgrammaticallyScrolled.current = true;
+    const sectionId = e.detail.sectionId;
     if (mode === ObjectPageMode.IconTabBar) {
-      const sectionId = e.detail.sectionId;
       setInternalSelectedSectionId(sectionId);
       const sectionNodes = objectPageRef.current?.querySelectorAll('section[data-component-name="ObjectPageSection"]');
       const currentIndex = childrenArray.findIndex((objectPageSection) => {
@@ -67,6 +69,7 @@ export const useHandleTabSelect = ({
     const subSectionId = e.detail.subSectionId;
     scrollTimeout.current = performance.now() + 200;
     setSelectedSubSectionId(subSectionId);
+    setTabSelectId(sectionId);
   };
 
   const handleTabItemSelect: TabContainerPropTypes['onTabSelect'] = (event) => {

packages/main/src/components/ObjectPage/useOnScrollEnd.ts

@@ -0,0 +1,44 @@
+import type { Dispatch, RefObject, SetStateAction, UIEventHandler } from 'react';
+import { useCallback, useEffect, useRef } from 'react';
+
+const isScrollEndAvailable = typeof document !== 'undefined' && 'onscrollend' in document.createElement('div');
+
+interface UseOnScrollEndProps {
+  objectPageRef: RefObject<HTMLDivElement>;
+  setTabSelectId: Dispatch<SetStateAction<string | null>>;
+}
+
+export function useOnScrollEnd(props: UseOnScrollEndProps) {
+  const { objectPageRef, setTabSelectId } = props;
+
+  const scrollEndTimeout = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  // Native scrollend listener
+  useEffect(() => {
+    const objectPage = objectPageRef.current;
+    if (!objectPage || !isScrollEndAvailable) return;
+
+    const onNativeScrollEnd = () => {
+      setTabSelectId(null);
+    };
+
+    objectPage.addEventListener('scrollend', onNativeScrollEnd);
+    return () => {
+      objectPage.removeEventListener('scrollend', onNativeScrollEnd);
+    };
+  }, [objectPageRef, setTabSelectId]);
+
+  // Fallback in onScroll
+  const onObjectPageScroll: UIEventHandler<HTMLDivElement> = useCallback(() => {
+    if (!isScrollEndAvailable) {
+      if (scrollEndTimeout.current) {
+        clearTimeout(scrollEndTimeout.current);
+      }
+      scrollEndTimeout.current = setTimeout(() => {
+        setTabSelectId(null);
+      }, 100);
+    }
+  }, [setTabSelectId]);
+
+  return onObjectPageScroll;
+}