[ObjectPage/ObjectPageSection] - onToggleHeaderContent in expanded State when scrolled down add a lot of blank space

[agnissh]

Bug Description

Object Page w/ long Header Section: Toggled - Expanded State when scrolled down add a lot of blank space

https://user-images.githubusercontent.com/22393088/225671926-ca368b04-9811-4e0a-b6fe-0226a729dff1.mov

Affected Component

ObjectPage/ObjectPageSection

Expected Behaviour

Scroll should be smooth with no extra spaces added

Isolated Example

https://codesandbox.io/p/sandbox/gallant-firefly-8dmsrx

Steps to Reproduce

1.Toggle Object Page
2.Ensure Header Section is expanded 3.Scroll Down

Log Output, Stack Trace or Screenshots

No response

Priority

Medium

UI5 Web Components Version

1.11.0

Browser

Chrome

Operating System

MacOS & Windows

Additional Context

No response

Declaration

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

[MarcusNotheis]

Hey @agnissh, thanks for reporting! The ObjectPage is developed in the UI5 Web Components for React repository, hence I'll move that issue over to our repo.

[ui5-webcomponents-react-bot]

:tada: This issue has been resolved in version v1.13.0 :tada:

The release is available on v1.13.0

Your semantic-release bot :package::rocket:

[roshnijalan97new]

Hi @Lukas742 , @MarcusNotheis ,I am trying out all the versions above 1.13.0 for "@ui5/webcomponents-react" ( https://github.com/SAP/ui5-webcomponents-react/releases), But I am unable to install it and I am getting error as follows: roshnijalan97 Project-workspace % yarn install ➤ YN0000: ┌ Project validation ➤ YN0057: │ @project: Resolutions field will be ignored ➤ YN0000: └ Completed ➤ YN0000: ┌ Resolution step ➤ YN0041: │ react-jss@npm:^10.10.0: Invalid authentication (as an anonymous user) ➤ YN0000: └ Completed in 3s 604ms ➤ YN0000: Failed with errors in 3s 608ms Please let me know if you are aware of the version for "@ui5/webcomponents-react" and "@ui5/webcomponents" which are compatible.

[MarcusNotheis]

Hi @roshnijalan97new, this error sounds like an setup issue on your end - I've just tried to create new project both locally and in the codesandbox and I was able to install node_modules without any issues. Could it be that you are targeting in internal registry which requires authentication?

YN0041: │ react-jss@npm:^10.10.0: Invalid authentication (as an anonymous user)

This line in the log sounds pretty much like that.

[roshnijalan97new]

Hi @MarcusNotheis, I am able to install the dependencies successfully if the versions are as follows: "@ui5/webcomponents": "1.9.3", "@ui5/webcomponents-base": "1.9.3", "@ui5/webcomponents-fiori": "1.9.3", "@ui5/webcomponents-icons": "1.9.3", "@ui5/webcomponents-react": "1.7.3",

But for the below versions
"@ui5/webcomponents": "1.13.0", "@ui5/webcomponents-base": "1.13.0", "@ui5/webcomponents-fiori": "1.13.0", "@ui5/webcomponents-icons": "1.13.0", "@ui5/webcomponents-react": "1.15.1", https://github.com/SAP/ui5-webcomponents-react/issues/4364#issuecomment-1554165793 this issue is coming up.

[MarcusNotheis]

Hi @roshnijalan97new,

did you check your .npmrc file for any special configurations regarding internal registries? I've just created a new codesandbox using the same versions as you mentioned above and I can install node_modules without any issues: https://codesandbox.io/p/sandbox/elastic-resonance-zu51c4?file=%2Fpackage.json%3A16%2C42

[roshnijalan97new]

Hi @MarcusNotheis, I have tried to update the versions to:

1)"@ui5/webcomponents": "1.13.0","@ui5/webcomponents-react": "1.15.1", 2)"@ui5/webcomponents": "1.13.0","@ui5/webcomponents-react": "1.15.0", 3)"@ui5/webcomponents": "1.12.0","@ui5/webcomponents-react": "1.14.0", 4)"@ui5/webcomponents": "1.12.0","@ui5/webcomponents-react": "1.13.1", 5)"@ui5/webcomponents": "1.12.0","@ui5/webcomponents-react": "1.13.0",

I am able to install the versions now, but getting error as follows: Browserslist: caniuse-lite is outdated. Please run: ➤ YN0000: [@project]:   npx browserslist@latest --update-db ➤ YN0000: [@project]:   Why you should do it regularly: https://github.com/browserslist/browserslist#browsers-data-updating ➤ YN0000: [@project]: (rpt2 plugin) Error: D:/workspace/frontend/@project/somefile.tsx: semantic error TS2322: Type 'ReactNode' is not assignable to type 'UI5WCSlotsNode | UI5WCSlotsNode[]'. ➤ YN0000: [@project]:   Type 'string' is not assignable to type 'UI5WCSlotsNode | UI5WCSlotsNode[]'. ➤ YN0000: [@project]: Error: D:/workspace/frontend/@project/somefile.tsx: semantic error TS2322: Type 'ReactNode' is not assignable to type 'UI5WCSlotsNode | UI5WCSlotsNode[]'. ➤ YN0000: [@project]:   Type 'string' is not assignable to type 'UI5WCSlotsNode | UI5WCSlotsNode[]'. ➤ YN0000: [@project]:     at error (D:\workspace\frontend\project.yarn\cache\rollup-npm-2.58.0-a4e2df1190-a5e5642f2b.zip\node_modules\rollup\dist\shared\rollup.js:158:30)

[Lukas742]

Hi @roshnijalan97new

the error is telling you that you have incompatible types for slot props. We've updated these types a while ago, because ReactPortal or string isn't supported for example. So, if you update your types to use UI5WCSlotsNode instead of ReactNode, the error should be resolved. This is also something we mentioned in our change log.

Also, please open an issue next time if you want to report or request something. This will make it easier for other users with the same issue to find it and is easier for us to maintain.

[Rahishsaifi]

Hi after updating version "@ui5/webcomponents": "1.13.0", "@ui5/webcomponents-base": "1.13.0", "@ui5/webcomponents-fiori": "1.13.0", "@ui5/webcomponents-icons": "1.13.0", "@ui5/webcomponents-react": "1.15.1",

i am getting error

Conversion of type 'boolean | ReducedReactNode | Iterable | ReactElement<any, string | JSXElementConstructor>' to type 'HTMLElement' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first. ➤ YN0000: Type 'ReactElement<any, string | JSXElementConstructor>' is missing the following properties from type 'HTMLElement': accessKey, accessKeyLabel, autocapitalize, dir, and 273 more. TS2352

[Lukas742]

Hi @Rahishsaifi

please refer to my previous comment:

Also, please open an issue next time if you want to report or request something. This will make it easier for other users with the same issue to find it and is easier for us to maintain.

It's again a type error, so you have incompatible types in your codebase which need to be fixed.