15299705219

Committed 28 May 2025 12:07PM CUT coverage: 89.026% (-0.04%) from 89.068%

Build # 15299705219

Build Type

Pull #7395

github

Committed by

web-flow

Commit Message

Merge 315e149e0 into 8175280e7

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

Run Details

3033 of 3937 branches covered (77.04%)

21 of 25 new or added lines in 3 files covered. (84.0%)

2 existing lines in 1 file now uncovered.

5322 of 5978 relevant lines covered (89.03%)

128766.9 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

77.78

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

import type { Dispatch, RefObject, SetStateAction, UIEventHandler } from 'react';
import { useCallback, useEffect, useRef } from 'react';

const isScrollEndAvailable = '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]);

  // 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;
}

1	import type { Dispatch, RefObject, SetStateAction, UIEventHandler } from 'react';
2	import { useCallback, useEffect, useRef } from 'react';
3
4	const isScrollEndAvailable = 'onscrollend' in document.createElement('div');	445✔
5
6	interface UseOnScrollEndProps {
7	objectPageRef: RefObject<HTMLDivElement>;
8	setTabSelectId: Dispatch<SetStateAction<string \| null>>;
9	}
10
11	export function useOnScrollEnd(props: UseOnScrollEndProps) {
12	const { objectPageRef, setTabSelectId } = props;	40,452✔
13
14	const scrollEndTimeout = useRef<ReturnType<typeof setTimeout> \| null>(null);	40,452✔
15
16	// Native scrollend listener
17	useEffect(() => {	40,452✔
18	const objectPage = objectPageRef.current;	2,242✔
19	if (!objectPage \|\| !isScrollEndAvailable) return;	2,242!
20
21	const onNativeScrollEnd = () => {	2,242✔
22	setTabSelectId(null);	1,059✔
23	};
24
25	objectPage.addEventListener('scrollend', onNativeScrollEnd);	2,242✔
26	return () => {	2,242✔
27	objectPage.removeEventListener('scrollend', onNativeScrollEnd);	2,204✔
28	};
29	}, [objectPageRef]);
30
31	// Fallback in onScroll
32	const onObjectPageScroll: UIEventHandler<HTMLDivElement> = useCallback(() => {	40,452✔
33	if (!isScrollEndAvailable) {	16,868!
NEW 34	if (scrollEndTimeout.current) {	×
NEW 35	clearTimeout(scrollEndTimeout.current);	×
36	}
NEW 37	scrollEndTimeout.current = setTimeout(() => {	×
NEW 38	setTabSelectId(null);	×
39	}, 100);
40	}
41	}, [setTabSelectId]);
42
43	return onObjectPageScroll;	40,452✔
44	}

SAP / ui5-webcomponents-react / 15299705219

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous