[SF-ACC][DynamicPage]: field is partly visible when using tab key

[tandan0813]

Describe the bug

This issue is related with: #10847 and has been partly fixed.
Please see the isolated example: https://stackblitz.com/edit/github-zkdxeksd?file=src%2FApp.tsx,package.json

When tab to Textarea, the textarea is not fully visible:

When tab back, the input box is not fully visible:

Isolated Example

https://stackblitz.com/edit/github-zkdxeksd?file=src%2FApp.tsx,package.json

Reproduction steps

Expected Behaviour

Keyboard focus scrolls to view and the full focus indicator is visible

Screenshots or Videos

No response

UI5 Web Components for React Version

2.11.0

UI5 Web Components Version

2.11.0

Browser

Chrome

Operating System

No response

Additional Context

No response

Relevant log output

Organization

No response

Declaration

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

[Lukas742]

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

[Valkanister]

Hello @SAP/ui5-webcomponents-topic-p ,

Please check if the floating footer above some of the content of the DynamicPage can be avoided.

Kind regards, 

Georgi

SAPUI5 | SAP Development Support

[NakataCode]

Hi @tandan0813,

I've investigated this issue and found that this is actually native browser behavior, not a bug specific to UI5 Web Components.

When tabbing through elements in any scrollable container, browsers only ensure partial visibility. The browser considers an element "in view" if any part of it is visible, but doesn't guarantee that the entire element including its focus indicator will be fully visible. This is standard behavior that affects all scrollable containers in web applications.

The DynamicPage component is already doing what it can by setting scroll-padding-block-start and scroll-padding-block-end based on the header state.

In this specific case with text inputs and textareas, the browser ensures only the caret is visible, and if there's enough space, it shows that portion of the element.

I'll be closing this issue however, please feel free to reopen it if you have any further questions or if there's something specific I might have missed.