[ExpandableText]: [In 320px, focused show less link cannot go to the viewport immediately]

[AlexYanSap1]

Describe the bug

https://ui5.github.io/webcomponents-react/v2/?path=/docs/data-display-expandabletext--docs

1. use the example in the 320px responsive mode
2. use the enter key to trigger the show more link
3. observe that the focus now goes to the show less link, but the focused link is not in the viewport now

Isolated Example

https://ui5.github.io/webcomponents-react/v2/?path=/docs/data-display-expandabletext--docs

Reproduction steps

1. use the example in the 320px responsive mode
2. use the enter key to trigger the show more link
3. observe that the focus now goes to the show less link, but the focused link is not in the viewport now

Expected Behaviour

the focused link should be in the viewport autamatically

Screenshots or Videos

No response

UI5 Web Components for React Version

2.20.0

UI5 Web Components Version

2.20.0

Browser

Chrome

Operating System

No response

Additional Context

No response

Relevant log output

Organization

SAP SF

Declaration

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

[Lukas742]

Hi @AlexYanSap1

the issue is not reproducible for me. Please add an isolated, reproducible example preferably by leveraging this StackBlitz template.

[AlexYanSap1]

HI @Lukas742 , you can use the StackBlitz example below.

It happens when the full text is long, the screen height is small, or the component is close to the bottom of the screen. In the screenshot, the 'Show Less' Actually has the focus after the expansion. But as you can see, the focused 'Show Less' is not in the viewport.

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