[DynamicPage]: Error in _toggleHeader `TypeError: Cannot read properties of null (reading 'scrollTop')`

[codefactor]

Bug Description

In certain automation test scenarios the React app can render the DynamicPage with header-snapped=true right away potentially before or during component initialization. The _toggleHeader has an unprotected access which triggers an uncaught promise exception that brings in Dev Mode a blocking Popup for react-scripts. This popup blocks the automation tests. Can this function be protected to avoid problems when the component hasn't been fully initialized?

webcomponents/packages/fiori/src/DynamicPage.ts

Line 400 in 13b71d5

const currentScrollTop = this.scrollContainer!.scrollTop;

The above line has the ! which bypasses typescript protection. This same shortcut has been taken in several places though it is unclear if those other places can actually be called when the this.scrollContainer is null/undefined.

Affected Component

DynamicPage

Expected Behaviour

The function _toggleHeader should gracefully handle being called when the component is not properly initialized

Isolated Example

Having difficulty to set up the test case outside of react

Steps to Reproduce

1. Use react render DynamicPage right away
2. Initialize the component with header-snapped true right away

Log Output, Stack Trace or Screenshots

Cannot read properties of null (reading 'scrollTop')
TypeError: Cannot read properties of null (reading 'scrollTop')
    at DynamicPage._toggleHeader (http://localhost:3000/static/js/bundle.js:114449:51)
    at set headerSnapped (http://localhost:3000/static/js/bundle.js:114370:12)
    at DynamicPage.set (http://localhost:3000/static/js/bundle.js:98809:23)
    at DynamicPage.attributeChangedCallback (http://localhost:3000/static/js/bundle.js:98321:29)
    at setValueForProperty (http://localhost:3000/static/js/bundle.js:442428:18)
    at setInitialDOMProperties (http://localhost:3000/static/js/bundle.js:450201:11)
    at setInitialProperties (http://localhost:3000/static/js/bundle.js:450376:7)
    at finalizeInitialChildren (http://localhost:3000/static/js/bundle.js:451256:7)
    at completeWork (http://localhost:3000/static/js/bundle.js:460903:21)
    at completeUnitOfWork (http://localhost:3000/static/js/bundle.js:464656:20)

Priority

Medium

UI5 Web Components Version

latest

Browser

Chrome

Operating System

No response

Additional Context

No response

Organization

No response

Declaration

• I’m not disclosing any internal or sensitive information.

[kskondov]

Hello @UI5/ui5-team-ctr-pir,
Can you please take a closer look at this issue?
Best Regards,
Konstantin

[github-actions]

This issue has been closed. To reopen, just leave a comment!