Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
1 task done
floa93 opened this issue Nov 22, 2024 · 3 comments · May be fixed by #10953
Assignees
Labels
bug This issue is a bug in the code Medium Prio TOPIC RD

Comments

@floa93
Copy link

floa93 commented Nov 22, 2024

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.
@floa93 floa93 added the bug This issue is a bug in the code label Nov 22, 2024
@ivoplashkov ivoplashkov self-assigned this Nov 22, 2024
@ivoplashkov ivoplashkov removed their assignment Nov 22, 2024
@ivoplashkov
Copy link
Member

Hello colleagues,

Seems like I didnt sent my reply by mistake.

The issue is reproducible with just popover also. Seems like when two popovers are opened at the same time and user clicks somewhere else, instead of the Popover, we get call stack exceed.

Best regards,
Ivaylo

@LidiyaGeorgieva LidiyaGeorgieva self-assigned this Nov 27, 2024
@LidiyaGeorgieva
Copy link
Contributor

Hello @floa93 ,

The ui5-menu i special kind of popover. And the popover is not designed to stays open if user clicks outside of it.
You can find more information here: https://sap.github.io/ui5-webcomponents/nightly/components/Popover/
In the page it is described "Note: The ui5-popover is closed when the user clicks or taps outside the popover or selects an action within the popover. You can prevent this with the modal property."
If the popover is modal it blocks any interaction with the background and could be closed within the popover by any action.
In both cases second popover could not be opened before the first one is closed.

What is your use-case? Why you need two popovers to be opened in the same time?

Best Regards,
Lidiya

@floa93
Copy link
Author

floa93 commented Nov 27, 2024

@LidiyaGeorgieva we are using it for an (simple) pdf editor to have multiple menus which display different actions.

What is your use-case? Why you need two popovers to be opened in the same time?
The issue is not that two popovers must be opened at the same time, we just noticed (after the upgrade to ui5-webcomponents v2) that the browser tab is crashing if the user accidently clicks on the first menu and then on the second.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug This issue is a bug in the code Medium Prio TOPIC RD
Projects
Status: New Issues
5 participants