Skip to content

[ui5-toolbar]: Flickering when changing button or dropdown state #12209

@Vonahz

Description

@Vonahz

Bug Description

When a button changes state (riggers a re-render and a full overflow recalculation. If this happens on every state change, it can cause the toolbar to flicker as it recalculates and re-renders, even if the button's width hasn't changed.

Root cause:
The toolbar is treating any child change (even visual state changes that don't affect layout) as a reason to reset its overflow logic and re-render.

Could be connected with #11666

Affected Component

No response

Expected Behaviour

No response

Isolated Example

https://sap.github.io/ui5-webcomponents/play/#eyJpbmRleC5odG1sIjp7Im5hbWUiOiJpbmRleC5odG1sIiwiY29udGVudCI6IjwhLS0gcGxheWdyb3VuZC1mb2xkIC0tPlxuPCFET0NUWVBFIGh0bWw-XG48aHRtbCBsYW5nPVwiZW5cIj5cblxuXG5cbjxoZWFkPlxuICAgIFxuICAgIDxzdHlsZT5cbiAgICAgICo6bm90KDpkZWZpbmVkKSB7XG4gICAgICAgIGRpc3BsYXk6IG5vbmU7XG4gICAgICB9XG5cbiAgICBodG1sIHtcbiAgICAgIGZvcmNlZC1jb2xvci1hZGp1c3Q6IG5vbmU7XG4gICAgfVxuICAgIDwvc3R5bGU-XG5cbiAgICBcbiAgICA8c3R5bGU-XG4gICAgICAqOm5vdCg6ZGVmaW5lZCkge1xuICAgICAgICBkaXNwbGF5OiBub25lO1xuICAgICAgfVxuXG4gICAgaHRtbCB7XG4gICAgICBmb3JjZWQtY29sb3ItYWRqdXN0OiBub25lO1xuICAgIH1cbiAgICA8L3N0eWxlPlxuXG4gICAgXG4gICAgPHN0eWxlPlxuICAgICAgKjpub3QoOmRlZmluZWQpIHtcbiAgICAgICAgZGlzcGxheTogbm9uZTtcbiAgICAgIH1cblxuICAgIGh0bWwge1xuICAgICAgZm9yY2VkLWNvbG9yLWFkanVzdDogbm9uZTtcbiAgICB9XG4gICAgPC9zdHlsZT5cblxuICAgIDxtZXRhIGNoYXJzZXQ9XCJVVEYtOFwiPlxuICAgIDxtZXRhIG5hbWU9XCJ2aWV3cG9ydFwiIGNvbnRlbnQ9XCJ3aWR0aD1kZXZpY2Utd2lkdGgsIGluaXRpYWwtc2NhbGU9MS4wXCI-XG4gICAgPHRpdGxlPlNhbXBsZTwvdGl0bGU-XG48L2hlYWQ-XG48Ym9keSBzdHlsZT1cImJhY2tncm91bmQtY29sb3I6IHZhcigtLXNhcEJhY2tncm91bmRDb2xvcik7aGVpZ2h0OiAyNTBweDtcIj5cbiAgICA8IS0tIHBsYXlncm91bmQtZm9sZC1lbmQgLS0-XG5cbiAgPHVpNS10b29sYmFyIGlkPVwidG9vbGJhclwiPlxuICAgIDx1aTUtdG9vbGJhci1idXR0b24gaWQ9XCJib2xkXCIgaWNvbj1cImJvbGQtdGV4dFwiIHRleHQ9XCJCb2xkXCI-PC91aTUtdG9vbGJhci1idXR0b24-XG4gICAgPHVpNS10b29sYmFyLWJ1dHRvbiBpY29uPVwiaXRhbGljLXRleHRcIiB0ZXh0PVwiSXRhbGljXCI-PC91aTUtdG9vbGJhci1idXR0b24-XG4gICAgPHVpNS10b29sYmFyLWJ1dHRvbiBpY29uPVwidW5kZXJsaW5lLXRleHRcIiB0ZXh0PVwiVW5kZXJsaW5lXCI-PC91aTUtdG9vbGJhci1idXR0b24-XG4gICAgPHVpNS10b29sYmFyLWJ1dHRvbiBpZD1cImFkZFwiIGljb249XCJhZGRcIiB0ZXh0PVwiQWRkXCIgZGlzYWJsZWQ-PC91aTUtdG9vbGJhci1idXR0b24-XG4gICAgPHVpNS10b29sYmFyLWJ1dHRvbiBpY29uPVwiZW1wbG95ZWVcIiB0ZXh0PVwiTW9yZVwiIG92ZXJmbG93LXByaW9yaXR5PVwiQWx3YXlzT3ZlcmZsb3dcIj48L3VpNS10b29sYmFyLWJ1dHRvbj5cbiAgICA8dWk1LXRvb2xiYXItc2VsZWN0IGlkPVwiZm9udFwiIHRleHQ9XCJGb250XCI-XG4gICAgICA8dWk1LW9wdGlvbiBzZWxlY3RlZD5BcmlhbDwvdWk1LW9wdGlvbj5cbiAgICAgIDx1aTUtb3B0aW9uPlRpbWVzIE5ldyBSb21hbjwvdWk1LW9wdGlvbj5cbiAgICAgIDx1aTUtb3B0aW9uPkNvdXJpZXIgTmV3PC91aTUtb3B0aW9uPlxuICAgICAgPHVpNS1vcHRpb24-VmVyeUxvbmdGb250TmFtZVRvVGVzdE92ZXJmbG93PC91aTUtb3B0aW9uPlxuICAgPC91aTUtdG9vbGJhci1zZWxlY3Q-IFxuICA8L3VpNS10b29sYmFyPlxuXG4gIDxzY3JpcHQ-XG4gICAgLy8gU2ltdWxhdGUgc3RhdGUgY2hhbmdlc1xuICAgIGNvbnN0IGFkZCA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCdhZGQnKTtcbiAgICBzZXRJbnRlcnZhbCgoKSA9PiB7XG4gICAgICBhZGQuZGlzYWJsZWQgPSAhYWRkLmRpc2FibGVkO1xuICAgIH0sIDEyMDApO1xuICA8L3NjcmlwdD5cbjwhLS0gcGxheWdyb3VuZC1mb2xkIC0tPlxuICAgIDxzY3JpcHQgdHlwZT1cIm1vZHVsZVwiIHNyYz1cIm1haW4uanNcIj48L3NjcmlwdD5cbjwvYm9keT5cbjwvaHRtbD5cbjwhLS0gcGxheWdyb3VuZC1mb2xkLWVuZCAtLT5cblxuIn0sIm1haW4uanMiOnsibmFtZSI6Im1haW4uanMiLCJjb250ZW50IjoiLyogcGxheWdyb3VuZC1oaWRlICovXG5pbXBvcnQgXCIuL3BsYXlncm91bmQtc3VwcG9ydC5qc1wiO1xuLyogcGxheWdyb3VuZC1oaWRlLWVuZCAqL1xuaW1wb3J0IFwiQHVpNS93ZWJjb21wb25lbnRzL2Rpc3QvVG9vbGJhci5qc1wiO1xuaW1wb3J0IFwiQHVpNS93ZWJjb21wb25lbnRzL2Rpc3QvVGl0bGUuanNcIjtcbmltcG9ydCBcIkB1aTUvd2ViY29tcG9uZW50cy9kaXN0L1Rvb2xiYXJCdXR0b24uanNcIjtcbmltcG9ydCBcIkB1aTUvd2ViY29tcG9uZW50cy9kaXN0L1Rvb2xiYXJTZWxlY3QuanNcIjtcbmltcG9ydCBcIkB1aTUvd2ViY29tcG9uZW50cy9kaXN0L1Rvb2xiYXJTcGFjZXIuanNcIjtcbmltcG9ydCBcIkB1aTUvd2ViY29tcG9uZW50cy9kaXN0L1Rvb2xiYXJTZXBhcmF0b3IuanNcIjtcbmltcG9ydCBcIkB1aTUvd2ViY29tcG9uZW50cy9kaXN0L1Rvb2xiYXJTZWxlY3RPcHRpb24uanNcIjtcbmltcG9ydCBcIkB1aTUvd2ViY29tcG9uZW50cy1pY29ucy9kaXN0L2RlY2xpbmUuanNcIjtcbmltcG9ydCBcIkB1aTUvd2ViY29tcG9uZW50cy1pY29ucy9kaXN0L2FkZC5qc1wiO1xuaW1wb3J0IFwiQHVpNS93ZWJjb21wb25lbnRzLWljb25zL2Rpc3QvZW1wbG95ZWUuanNcIjtcbmltcG9ydCBcIkB1aTUvd2ViY29tcG9uZW50cy1pY29ucy9kaXN0L2RlY2xpbmUuanNcIjtcblxuICAgIHNldEludGVydmFsKCgpID0-IHtcbiAgICAgIGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCdib2xkJykucHJlc3NlZCA9IE1hdGgucmFuZG9tKCkgPiAwLjU7XG4gICAgICBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnaXRhbGljJykucHJlc3NlZCA9IE1hdGgucmFuZG9tKCkgPiAwLjU7XG4gICAgICBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgndW5kZXJsaW5lJykucHJlc3NlZCA9IE1hdGgucmFuZG9tKCkgPiAwLjU7XG4gICAgfSwgMTAwMCk7In19

Steps to Reproduce

  1. Open the example.
  2. Resize the toolbar until dropdown goes into the overflow section.

...

Log Output, Stack Trace or Screenshots

Toolbar.flickering.mov

Priority

None

UI5 Web Components Version

2.13.3

Browser

Chrome

Operating System

MacOS

Additional Context

No response

Organization

No response

Declaration

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

Metadata

Metadata

Assignees

Labels

Type

Projects

Status

In Progress

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions