@@ -31,7 +31,7 @@ import type {
3131} from '../ObjectPageTitle/index.js' ;
3232import { CollapsedAvatar } from './CollapsedAvatar.js' ;
3333import { classNames , styleData } from './ObjectPage.module.css.js' ;
34- import { getSectionById } from './ObjectPageUtils.js' ;
34+ import { getSectionById , getSectionElementById } from './ObjectPageUtils.js' ;
3535
3636const ObjectPageCssVariables = {
3737 headerDisplay : '--_ui5wcr_ObjectPage_header_display' ,
@@ -218,10 +218,10 @@ const ObjectPage = forwardRef<ObjectPageDomRef, ObjectPagePropTypes>((props, ref
218218 const [ internalSelectedSectionId , setInternalSelectedSectionId ] = useState < string | undefined > (
219219 selectedSectionId ?? firstSectionId
220220 ) ;
221- const [ selectedSubSectionId , setSelectedSubSectionId ] = useState ( props . selectedSubSectionId ) ;
221+ const [ selectedSubSectionId , setSelectedSubSectionId ] = useState ( undefined ) ;
222222 const [ headerPinned , setHeaderPinned ] = useState ( headerPinnedProp ) ;
223223 const isProgrammaticallyScrolled = useRef ( false ) ;
224- const prevSelectedSectionId = useRef < string | undefined > ( undefined ) ;
224+ const [ isMounted , setIsMounted ] = useState ( false ) ;
225225
226226 const [ componentRef , objectPageRef ] = useSyncRef ( ref ) ;
227227 const topHeaderRef = useRef < HTMLDivElement > ( null ) ;
@@ -326,9 +326,7 @@ const ObjectPage = forwardRef<ObjectPageDomRef, ObjectPagePropTypes>((props, ref
326326 } , [ image , classNames . headerImage , classNames . image , imageShapeCircle ] ) ;
327327
328328 const scrollToSectionById = ( id : string | undefined , isSubSection = false ) => {
329- const section = objectPageRef . current ?. querySelector < HTMLElement > (
330- `#${ isSubSection ? 'ObjectPageSubSection' : 'ObjectPageSection' } ${ CSS . escape ( id ) }
331- ) ;
329+ const section = getSectionElementById ( objectPageRef . current , isSubSection , id ) ;
332330 scrollTimeout . current = performance . now ( ) + 500 ;
333331 if ( section ) {
334332 const safeTopHeaderHeight = topHeaderHeight || prevTopHeaderHeight . current ;
@@ -367,45 +365,6 @@ const ObjectPage = forwardRef<ObjectPageDomRef, ObjectPagePropTypes>((props, ref
367365 isProgrammaticallyScrolled . current = false ;
368366 } ;
369367
370- const programmaticallySetSection = ( ) => {
371- const currentId = selectedSectionId ?? firstSectionId ;
372- if ( currentId !== prevSelectedSectionId . current ) {
373- debouncedOnSectionChange . cancel ( ) ;
374- isProgrammaticallyScrolled . current = true ;
375- setInternalSelectedSectionId ( currentId ) ;
376- prevSelectedSectionId . current = currentId ;
377- const sectionNodes = objectPageRef . current ?. querySelectorAll ( 'section[data-component-name="ObjectPageSection"]' ) ;
378- const currentIndex = childrenArray . findIndex ( ( objectPageSection ) => {
379- return isValidElement ( objectPageSection ) && objectPageSection . props ?. id === currentId ;
380- } ) ;
381- fireOnSelectedChangedEvent ( { } , currentIndex , currentId , sectionNodes [ 0 ] ) ;
382- }
383- } ;
384-
385- // change selected section when prop is changed (external change)
386- const [ timeStamp , setTimeStamp ] = useState ( 0 ) ;
387- const requestAnimationFrameRef = useRef < undefined | number > ( undefined ) ;
388- useEffect ( ( ) => {
389- if ( selectedSectionId ) {
390- if ( mode === ObjectPageMode . Default ) {
391- // wait for DOM draw, otherwise initial scroll won't work as intended
392- if ( timeStamp < 750 && timeStamp !== undefined ) {
393- requestAnimationFrameRef . current = requestAnimationFrame ( ( internalTimestamp ) => {
394- setTimeStamp ( internalTimestamp ) ;
395- } ) ;
396- } else {
397- setTimeStamp ( undefined ) ;
398- programmaticallySetSection ( ) ;
399- }
400- } else {
401- programmaticallySetSection ( ) ;
402- }
403- }
404- return ( ) => {
405- cancelAnimationFrame ( requestAnimationFrameRef . current ) ;
406- } ;
407- } , [ timeStamp , selectedSectionId , firstSectionId , debouncedOnSectionChange ] ) ;
408-
409368 // section was selected by clicking on the tab bar buttons
410369 const handleOnSectionSelected = ( targetEvent , newSelectionSectionId , index , section ) => {
411370 isProgrammaticallyScrolled . current = true ;
@@ -421,12 +380,24 @@ const ObjectPage = forwardRef<ObjectPageDomRef, ObjectPagePropTypes>((props, ref
421380 fireOnSelectedChangedEvent ( targetEvent , index , newSelectionSectionId , section ) ;
422381 } ;
423382
383+ useEffect ( ( ) => {
384+ if ( selectedSectionId ) {
385+ const selectedSection = getSectionElementById ( objectPageRef . current , false , selectedSectionId ) ;
386+ if ( selectedSection ) {
387+ const selectedSectionIndex = Array . from (
388+ selectedSection . parentElement . querySelectorAll ( ':scope > [data-component-name="ObjectPageSection"]' )
389+ ) . indexOf ( selectedSection ) ;
390+ handleOnSectionSelected ( { } , selectedSectionId , selectedSectionIndex , selectedSection ) ;
391+ }
392+ }
393+ } , [ selectedSectionId ] ) ;
394+
424395 // do internal scrolling
425396 useEffect ( ( ) => {
426397 if ( mode === ObjectPageMode . Default && isProgrammaticallyScrolled . current === true && ! selectedSubSectionId ) {
427398 scrollToSection ( internalSelectedSectionId ) ;
428399 }
429- } , [ internalSelectedSectionId , mode , isProgrammaticallyScrolled , scrollToSection , selectedSubSectionId ] ) ;
400+ } , [ internalSelectedSectionId , mode , selectedSubSectionId ] ) ;
430401
431402 // Scrolling for Sub Section Selection
432403 useEffect ( ( ) => {
@@ -457,11 +428,15 @@ const ObjectPage = forwardRef<ObjectPageDomRef, ObjectPagePropTypes>((props, ref
457428 } , [ headerPinned , topHeaderHeight ] ) ;
458429
459430 useEffect ( ( ) => {
431+ if ( ! isMounted ) {
432+ setIsMounted ( true ) ;
433+ return ;
434+ }
460435 setSelectedSubSectionId ( props . selectedSubSectionId ) ;
461436 if ( props . selectedSubSectionId ) {
462437 isProgrammaticallyScrolled . current = true ;
463438 if ( mode === ObjectPageMode . IconTabBar ) {
464- let sectionId ;
439+ let sectionId : string ;
465440 childrenArray . forEach ( ( section ) => {
466441 if ( isValidElement ( section ) && section . props && section . props . children ) {
467442 safeGetChildrenArray ( section . props . children ) . forEach ( ( subSection ) => {
@@ -480,7 +455,7 @@ const ObjectPage = forwardRef<ObjectPageDomRef, ObjectPagePropTypes>((props, ref
480455 }
481456 }
482457 }
483- } , [ props . selectedSubSectionId , childrenArray , mode ] ) ;
458+ } , [ props . selectedSubSectionId , isMounted ] ) ;
484459
485460 const tabContainerContainerRef = useRef ( null ) ;
486461 useEffect ( ( ) => {
0 commit comments