Skip to content

[ui5-split-button/ui5-menu] Multiple ui5-split-button with ui5-menu are crashing chrome after opening both and clicking out of focus #10237

@floa93

Description

@floa93

Bug Description

If you have two ui5-split buttons and each split button has a ui5-menu the tab in Chrome crashes. To reproduce you have to click on the first split button and then directly after the second split button to open both menus simultaneously and then click somewhere else. The workaround is to close the other menu with .open=false before opening the other.

image

Affected Component

No response

Expected Behaviour

Should not crash the tab

Isolated Example

https://sap.github.io/ui5-webcomponents/nightly/play/#eyJpbmRleC5odG1sIjp7Im5hbWUiOiJpbmRleC5odG1sIiwiY29udGVudCI6IjwhLS0gcGxheWdyb3VuZC1mb2xkIC0tPlxuPCFET0NUWVBFIGh0bWw-XG48aHRtbCBsYW5nPVwiZW5cIj5cblxuXG5cbjxoZWFkPlxuICAgIFxuICAgIDxzdHlsZT5cbiAgICAgICo6bm90KDpkZWZpbmVkKSB7XG4gICAgICAgIGRpc3BsYXk6IG5vbmU7XG4gICAgICB9XG5cbiAgICBodG1sIHtcbiAgICAgIGZvcmNlZC1jb2xvci1hZGp1c3Q6IG5vbmU7XG4gICAgfVxuICAgIDwvc3R5bGU-XG5cbiAgICBcbiAgICA8c3R5bGU-XG4gICAgICAqOm5vdCg6ZGVmaW5lZCkge1xuICAgICAgICBkaXNwbGF5OiBub25lO1xuICAgICAgfVxuXG4gICAgaHRtbCB7XG4gICAgICBmb3JjZWQtY29sb3ItYWRqdXN0OiBub25lO1xuICAgIH1cbiAgICA8L3N0eWxlPlxuXG4gICAgPG1ldGEgY2hhcnNldD1cIlVURi04XCI-XG4gICAgPG1ldGEgbmFtZT1cInZpZXdwb3J0XCIgY29udGVudD1cIndpZHRoPWRldmljZS13aWR0aCwgaW5pdGlhbC1zY2FsZT0xLjBcIj5cbiAgICA8dGl0bGU-U2FtcGxlPC90aXRsZT5cbjwvaGVhZD5cblxuPGJvZHkgc3R5bGU9XCJiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS1zYXBCYWNrZ3JvdW5kQ29sb3IpO1wiPlxuICAgIDwhLS0gcGxheWdyb3VuZC1mb2xkLWVuZCAtLT5cblxuICAgICAgICA8dWk1LXNwbGl0LWJ1dHRvbiBpZD1cImFiYzFcIj5PcGVuIE1lbnU8L3VpNS1zcGxpdC1idXR0b24-XG4gICAgICAgIDxkaXYgc3R5bGU9XCJoZWlnaHQ6IDIwMHB4XCI-XG4gICAgICAgICAgICA8dWk1LW1lbnUgaWQ9XCJhYmMxMVwiPlxuICAgICAgICAgICAgICAgIDx1aTUtbWVudS1pdGVtIHRleHQ9XCJFZGl0XCIgaWNvbj1cImFkZFwiPjwvdWk1LW1lbnUtaXRlbT5cbiAgICAgICAgICAgICAgICA8dWk1LW1lbnUtaXRlbSB0ZXh0PVwiU2F2ZVwiIGljb249XCJzYXZlXCI-PC91aTUtbWVudS1pdGVtPlxuICAgICAgICAgICAgICAgIDx1aTUtbWVudS1pdGVtIHRleHQ9XCJEZWxldGVcIiBpY29uPVwiZGVsZXRlXCI-PC91aTUtbWVudS1pdGVtPlxuICAgICAgICAgICAgPC91aTUtbWVudT5cbiAgICAgICAgPC9kaXY-XG5cbiAgICAgICAgPHVpNS1zcGxpdC1idXR0b24gaWQ9XCJhYmMyXCI-T3BlbiBNZW51MjwvdWk1LXNwbGl0LWJ1dHRvbj5cbiAgICAgICAgPGRpdiBzdHlsZT1cImhlaWdodDogMjAwcHhcIj5cbiAgICAgICAgICAgIDx1aTUtbWVudSBpZD1cImFiYzIyXCI-XG4gICAgICAgICAgICAgICAgPHVpNS1tZW51LWl0ZW0gdGV4dD1cIkVkaXRcIiBpY29uPVwiYWRkXCI-PC91aTUtbWVudS1pdGVtPlxuICAgICAgICAgICAgICAgIDx1aTUtbWVudS1pdGVtIHRleHQ9XCJTYXZlXCIgaWNvbj1cInNhdmVcIj48L3VpNS1tZW51LWl0ZW0-XG4gICAgICAgICAgICAgICAgPHVpNS1tZW51LWl0ZW0gdGV4dD1cIkRlbGV0ZVwiIGljb249XCJkZWxldGVcIj48L3VpNS1tZW51LWl0ZW0-XG4gICAgICAgICAgICA8L3VpNS1tZW51PlxuICAgICAgICA8L2Rpdj5cbiAgIFxuICAgIDwhLS0gcGxheWdyb3VuZC1mb2xkIC0tPlxuICAgIDxzY3JpcHQgdHlwZT1cIm1vZHVsZVwiIHNyYz1cIm1haW4uanNcIj48L3NjcmlwdD5cbjwvYm9keT5cblxuPC9odG1sPlxuPCEtLSBwbGF5Z3JvdW5kLWZvbGQtZW5kIC0tPlxuIn0sIm1haW4uanMiOnsibmFtZSI6Im1haW4uanMiLCJjb250ZW50IjoiLyogcGxheWdyb3VuZC1oaWRlICovXG5pbXBvcnQgXCIuL3BsYXlncm91bmQtc3VwcG9ydC5qc1wiO1xuLyogcGxheWdyb3VuZC1oaWRlLWVuZCAqL1xuaW1wb3J0IFwiQHVpNS93ZWJjb21wb25lbnRzL2Rpc3QvU3BsaXRCdXR0b24uanNcIjtcbmltcG9ydCBcIkB1aTUvd2ViY29tcG9uZW50cy9kaXN0L01lbnUuanNcIjtcbmltcG9ydCBcIkB1aTUvd2ViY29tcG9uZW50cy9kaXN0L01lbnVJdGVtLmpzXCI7XG5pbXBvcnQgXCJAdWk1L3dlYmNvbXBvbmVudHMtaWNvbnMvZGlzdC9hZGQuanNcIjtcbmltcG9ydCBcIkB1aTUvd2ViY29tcG9uZW50cy1pY29ucy9kaXN0L3NhdmUuanNcIjtcbmltcG9ydCBcIkB1aTUvd2ViY29tcG9uZW50cy1pY29ucy9kaXN0L2RlbGV0ZS5qc1wiO1xuXG4gICAgICAgICAgICBhYmMxLmFkZEV2ZW50TGlzdGVuZXIoXCJhcnJvdy1jbGlja1wiLCBmdW5jdGlvbiAoKSB7XG4gICAgICAgICAgICAgICAgYWJjMTEub3BlbiA9ICFhYmMxMS5vcGVuO1xuICAgICAgICAgICAgICAgIGFiYzExLm9wZW5lciA9IGFiYzE7XG4gICAgICAgICAgICAgICAgYWJjMS5hY3RpdmVBcnJvd0J1dHRvbiA9IGFiYzExLm9wZW47XG4gICAgICAgICAgICB9KTtcblxuICAgICAgICAgICAgYWJjMTEuYWRkRXZlbnRMaXN0ZW5lcihcImNsb3NlXCIsIGZ1bmN0aW9uICgpIHtcbiAgICAgICAgICAgICAgICBhYmMxLmFjdGl2ZUFycm93QnV0dG9uID0gZmFsc2U7XG4gICAgICAgICAgICB9KTtcbiAgICAgICAgICAgIFxuICAgICAgICAgICAgYWJjMi5hZGRFdmVudExpc3RlbmVyKFwiYXJyb3ctY2xpY2tcIiwgZnVuY3Rpb24gKCkge1xuICAgICAgICAgICAgICAgIGFiYzIyLm9wZW4gPSAhYWJjMjIub3BlbjtcbiAgICAgICAgICAgICAgICBhYmMyMi5vcGVuZXIgPSBhYmMyO1xuICAgICAgICAgICAgICAgIGFiYzIuYWN0aXZlQXJyb3dCdXR0b24gPSBhYmMyMi5vcGVuO1xuICAgICAgICAgICAgfSk7XG5cbiAgICAgICAgICAgIGFiYzIyLmFkZEV2ZW50TGlzdGVuZXIoXCJjbG9zZVwiLCBmdW5jdGlvbiAoKSB7XG4gICAgICAgICAgICAgICAgYWJjMi5hY3RpdmVBcnJvd0J1dHRvbiA9IGZhbHNlO1xuICAgICAgICAgICAgfSk7In19

Steps to Reproduce

  1. Open the first split button so the first ui5-menu shows
  2. Directly open the second split button so the first and the second ui5-menu are both visible
  3. Click somewhere else (out of focus of both menus)
  4. Tab in Chrome crashes
    ...

Log Output, Stack Trace or Screenshots

No response

Priority

None

UI5 Web Components Version

2.4.0

Browser

Chrome

Operating System

Windows

Additional Context

No response

Organization

SAP

Declaration

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

Metadata

Metadata

Assignees

Type

No type

Projects

Status

Completed

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions