DynamicPage: clicking button in table header/toolbar doesn't work, but scrolls page header panel

[JJPandari]

Describe the bug

1. scroll so the details in the dynamic page header has only "Rack: 34" on screen (rows above this are hidden)
2. make sure "test" button has no focus, then click "test"

expected: browser shows alert "clicked"
actual: repeat steps 1 and 2 a few times, sometimes alert doesn't show. Meanwhile, the dynamic page header is scrolled up a bit, just by clicking the "test" button, I suspect this has something to do with the button not working.

Isolated Example

https://stackblitz.com/edit/github-vbuse2rw?file=src%2FApp.tsx

Reproduction steps

see description

Expected Behaviour

see description

Screenshots or Videos

No response

UI5 Web Components for React Version

2.20.1

UI5 Web Components Version

2.20.2

Browser

Chrome

Operating System

macOS

Additional Context

No response

Relevant log output

Organization

No response

Declaration

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

[Lukas742]

Hi @JJPandari

Thanks for reporting! I'll forward this issue to our UI5 Web Components Colleagues as the affected component is developed in their repository.

---

Hi Colleagues,

this behavior is likely related to the page being scrolled when the headerArea is only partially collapsed at the time the button is clicked.

[kineticjs]

Hi @UI5/ui5-team-ctr-pir ,

The issue is reproducible in the internal samples of DynamicPage too, if we add a ui5-button in the beginning of the content and click the button while the page header is partially hidden.

The issue is related to the focus handling of page content in function DynamicPage.prototype.onContentFocusIn
If we temporarily remove the following code:

requestAnimationFrame(() => {
	target.scrollIntoView({ behavior: "smooth", block: "nearest" });
});

the issue does not occur.