SAP
[Toolbar]: AlwaysOverflow toolbar children are visible before toolbar resizes
Bug Description
If I add multiple ToolbarButton components into a Toolbar with the overflow-priority property set to AlwaysOverflow on some of them, the AlwaysOverflow buttons are still briefly visible before the Toolbar resize handler is triggered. We're receiving bug reports internally at SAP SF for this.
This issue is especially visible on low power devices, which can be simulated by using CPU throttling in the Chrome dev tools (on my Intel i9 MacBook, 6x CPU throttling makes the issue easily visible). I've linked a simple StackBlitz where I was able to replicate the issue without any external dependencies.
Affected Component
Toolbar
Expected Behaviour
AlwaysOverflow children presumably shouldn't be visible at any time.
Isolated Example
https://stackblitz.com/edit/ui5-webcomponents-yiljtwnh?file=index.html,package.json,index.ts
Steps to Reproduce
- Create a toolbar component.
- Add toolbar buttons with the
overflow-priorityset to "AlwaysOverflow" - Observe the issue.
Log Output, Stack Trace or Screenshots
Priority
Medium
UI5 Web Components Version
2.10.0, 2.13.0
Browser
Chrome
Operating System
macOS
Additional Context
No response
Organization
SAP SuccessFactors
Declaration
- [x] I’m not disclosing any internal or sensitive information.
Hello @SAP/ui5-webcomponents-topic-p,
Could you take a look at this issue?
The customer reports that ToolbarButtons with overflow-priority="AlwaysOverflow" are briefly visible in the toolbar on initial load before being moved to the overflow area. This flicker is especially noticeable on low-end devices.
From what I observed, the overflow layout is applied after initial rendering, so AlwaysOverflow items are first rendered in the visible area and then moved.
The issue is reproducible in the provided sample- when reloading the page, the AlwaysOverflow items briefly appear in the toolbar before being moved to the overflow, resulting in a visible flicker.
Best Regards, Stefan
