Skip to content

Conversation

@dobrinyonkov
Copy link
Contributor

@dobrinyonkov dobrinyonkov commented Oct 30, 2025

When title or header elements received focus, they would trigger unwanted
scrolling because they are part of the scroll container but have static
scroll-padding. This caused scroll jumps when navigating between
content and header areas which lead to unsnap.

Step to reproduce:

  1. Open https://ui5.github.io/webcomponents/nightly/packages/fiori/test/pages/DynamicPage.html
  2. Scroll until title snaps
  3. Place focus in content (e.g on a list item)
  4. Press SHIFT+TAB multiple times to go through the buttons in the title

Result:
Page scroll up => title unsnaps

Demo solution on
https://pr-12588--ui5-webcomponents-preview.netlify.app/packages/fiori/test/pages/dynamicpage

Fix by implementing dynamic scroll padding that:

  • Sets scroll-padding-top/bottom when focus enters content area
  • Resets scroll-padding when focus leaves content area
  • Prevents title/header focus from triggering scroll behavior

This ensures smooth focus transitions without unexpected scroll jumps
while maintaining proper scrollIntoView behavior for content elements.

Changes:

  • Replace static scroll-padding with dynamic onContentFocusIn/onContentFocusOut handlers
  • Remove lifecycle-based focus management (_focusInHandler, onAfterRendering/onExitDOM)
  • Add topAreaHeight/endAreaHeight getters for dynamic padding calculation
  • Add test coverage for focus handling and scroll padding behavior

Closes: #11689

@ui5-webcomponents-bot
Copy link
Collaborator

@ui5-webcomponents-bot ui5-webcomponents-bot temporarily deployed to preview October 30, 2025 14:17 Inactive
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Dynamic Page]: tab focus bypasses tab

4 participants