[ui5-side-navigation-item][1.24]: incorrect position of ui5-responsive-popover, when ui5-side-navigation-item has subitems and icon is hovered

[hinzzx]

Bug Description

Hello team,

While working on #10843 I noticed that when hovering over the arrow icon of an item of the ui5-side-navigation (i.e the item has subitems), the ui5-responsive-popover which shows the sub-items is rendered next to the icon, rather than the list item itself.

Affected Component

ui5-side-navigation, ui5-side-navigation-item

Expected Behaviour

The popover should be shown next to the list item and not to the hovered icon. Please refer to the video below.

Isolated Example

https://sap.github.io/ui5-webcomponents/v1/play/#eyJpbmRleC5odG1sIjp7Im5hbWUiOiJpbmRleC5odG1sIiwiY29udGVudCI6IjwhLS0gcGxheWdyb3VuZC1mb2xkIC0tPlxuPCFET0NUWVBFIGh0bWw-XG48aHRtbCBsYW5nPVwiZW5cIj5cblxuXG5cbjxoZWFkPlxuICAgIFxuICAgIDxzdHlsZT5cbiAgICAgICo6bm90KDpkZWZpbmVkKSB7XG4gICAgICAgIGRpc3BsYXk6IG5vbmU7XG4gICAgICB9XG4gICAgPC9zdHlsZT5cblxuICAgIFxuICAgIDxzdHlsZT5cbiAgICAgICo6bm90KDpkZWZpbmVkKSB7XG4gICAgICAgIGRpc3BsYXk6IG5vbmU7XG4gICAgICB9XG4gICAgPC9zdHlsZT5cblxuICAgIDxtZXRhIGNoYXJzZXQ9XCJVVEYtOFwiPlxuICAgIDxtZXRhIG5hbWU9XCJ2aWV3cG9ydFwiIGNvbnRlbnQ9XCJ3aWR0aD1kZXZpY2Utd2lkdGgsIGluaXRpYWwtc2NhbGU9MS4wXCI-XG4gICAgPHRpdGxlPlNhbXBsZTwvdGl0bGU-XG4gICAgPGxpbmsgcmVsPVwic3R5bGVzaGVldFwiIGhyZWY9XCIuL21haW4uY3NzXCI-XG48L2hlYWQ-XG5cbjxib2R5IHN0eWxlPVwiYmFja2dyb3VuZC1jb2xvcjogdmFyKC0tc2FwQmFja2dyb3VuZENvbG9yKVwiPlxuICAgIDwhLS0gcGxheWdyb3VuZC1mb2xkLWVuZCAtLT5cblxuXG4gICAgPGRpdiBjbGFzcz1cInRvb2wtbGF5b3V0XCI-XG4gICAgICAgIDx1aTUtc2hlbGxiYXIgcHJpbWFyeS10aXRsZT1cIlByb2R1Y3QgTmFtZVwiIHNlY29uZGFyeS10aXRsZT1cIlNlY29uZCBUaXRsZVwiIG5vdGlmaWNhdGlvbnMtY291bnQ9XCIxXCJcbiAgICAgICAgICAgIHNob3ctbm90aWZpY2F0aW9ucz5cbiAgICAgICAgICAgIDxpbWcgc2xvdD1cImxvZ29cIiBzcmM9XCJodHRwczovL3NhcC5naXRodWIuaW8vdWk1LXdlYmNvbXBvbmVudHMvdjEvaW1hZ2VzL3NhcC1sb2dvLXN2Zy5zdmdcIiAvPlxuICAgICAgICAgICAgPHVpNS1pbnB1dCBzbG90PVwic2VhcmNoRmllbGRcIj48L3VpNS1pbnB1dD5cbiAgICAgICAgICAgIDx1aTUtYnV0dG9uIGljb249XCJtZW51XCIgc2xvdD1cInN0YXJ0QnV0dG9uXCIgaWQ9XCJ0b2dnbGVcIj48L3VpNS1idXR0b24-XG4gICAgICAgICAgICA8dWk1LWF2YXRhciBzbG90PVwicHJvZmlsZVwiPlxuICAgICAgICAgICAgICAgIDxpbWcgc3JjPVwiaHR0cHM6Ly9zYXAuZ2l0aHViLmlvL3VpNS13ZWJjb21wb25lbnRzL3YxL2ltYWdlcy9hdmF0YXJzL3dvbWFuX2F2YXRhcl81LnBuZ1wiIC8-XG4gICAgICAgICAgICA8L3VpNS1hdmF0YXI-XG4gICAgICAgICAgICA8dWk1LXNoZWxsYmFyLWl0ZW0gaWNvbj1cInNvdXJjZS1jb2RlXCIgdGV4dD1cIlNldHRpbmdzXCIgdGl0bGU9XCJTZXR0aW5nc1wiPjwvdWk1LXNoZWxsYmFyLWl0ZW0-XG4gICAgICAgICAgICA8dWk1LXNoZWxsYmFyLWl0ZW0gaWNvbj1cImJhY2tncm91bmRcIiB0ZXh0PVwiU2V0dGluZ3NcIiB0aXRsZT1cIlNldHRpbmdzXCI-PC91aTUtc2hlbGxiYXItaXRlbT5cbiAgICAgICAgICAgIDx1aTUtc2hlbGxiYXItaXRlbSBpY29uPVwiYWN0aXZpdHktYXNzaWduZWQtdG8tZ29hbFwiIHRleHQ9XCJTZXR0aW5nc1wiIHRpdGxlPVwiU2V0dGluZ3NcIj48L3VpNS1zaGVsbGJhci1pdGVtPlxuICAgICAgICAgICAgPHVpNS1zaGVsbGJhci1pdGVtIGljb249XCJhY3Rpb24tc2V0dGluZ3NcIiB0ZXh0PVwiU2V0dGluZ3NcIiB0aXRsZT1cIlNldHRpbmdzXCI-PC91aTUtc2hlbGxiYXItaXRlbT5cbiAgICAgICAgPC91aTUtc2hlbGxiYXI-XG4gICAgICAgIDx1aTUtc2lkZS1uYXZpZ2F0aW9uIGNvbGxhcHNlZD5cbiAgICAgICAgICAgIDx1aTUtc2lkZS1uYXZpZ2F0aW9uLWl0ZW0gdGV4dD1cIkhvbWVcIiBpY29uPVwiaG9tZVwiPjwvdWk1LXNpZGUtbmF2aWdhdGlvbi1pdGVtPlxuICAgICAgICAgICAgPHVpNS1zaWRlLW5hdmlnYXRpb24taXRlbSB0ZXh0PVwiSG9tZVwiIGljb249XCJob21lXCI-PC91aTUtc2lkZS1uYXZpZ2F0aW9uLWl0ZW0-XG4gICAgICAgICAgICA8dWk1LXNpZGUtbmF2aWdhdGlvbi1pdGVtIHRleHQ9XCJIb21lXCIgaWNvbj1cImhvbWVcIj48L3VpNS1zaWRlLW5hdmlnYXRpb24taXRlbT5cbiAgICAgICAgICAgIDx1aTUtc2lkZS1uYXZpZ2F0aW9uLWl0ZW0gdGV4dD1cIkhvbWVcIiBpY29uPVwiaG9tZVwiPjwvdWk1LXNpZGUtbmF2aWdhdGlvbi1pdGVtPlxuICAgICAgICAgICAgPHVpNS1zaWRlLW5hdmlnYXRpb24taXRlbSB0ZXh0PVwiSG9tZVwiIGljb249XCJob21lXCI-PC91aTUtc2lkZS1uYXZpZ2F0aW9uLWl0ZW0-XG4gICAgICAgICAgICA8dWk1LXNpZGUtbmF2aWdhdGlvbi1pdGVtIHRleHQ9XCJIb21lXCIgaWNvbj1cImhvbWVcIj48L3VpNS1zaWRlLW5hdmlnYXRpb24taXRlbT5cbiAgICAgICAgICAgIDx1aTUtc2lkZS1uYXZpZ2F0aW9uLWl0ZW0gdGV4dD1cIkhvbWVcIiBpY29uPVwiaG9tZVwiPjwvdWk1LXNpZGUtbmF2aWdhdGlvbi1pdGVtPlxuICAgICAgICAgICAgPHVpNS1zaWRlLW5hdmlnYXRpb24taXRlbSB0ZXh0PVwiSG9tZVwiIGljb249XCJob21lXCI-PC91aTUtc2lkZS1uYXZpZ2F0aW9uLWl0ZW0-XG4gICAgICAgICAgICA8dWk1LXNpZGUtbmF2aWdhdGlvbi1pdGVtIHRleHQ9XCJIb21lXCIgaWNvbj1cImhvbWVcIj48L3VpNS1zaWRlLW5hdmlnYXRpb24taXRlbT5cbiAgICAgICAgICAgIDx1aTUtc2lkZS1uYXZpZ2F0aW9uLWl0ZW0gdGV4dD1cIkhvbWVcIiBpY29uPVwiaG9tZVwiPjwvdWk1LXNpZGUtbmF2aWdhdGlvbi1pdGVtPlxuICAgICAgICAgICAgPHVpNS1zaWRlLW5hdmlnYXRpb24taXRlbSB0ZXh0PVwiSG9tZVwiIGljb249XCJob21lXCI-PC91aTUtc2lkZS1uYXZpZ2F0aW9uLWl0ZW0-XG4gICAgICAgICAgICA8dWk1LXNpZGUtbmF2aWdhdGlvbi1pdGVtIHRleHQ9XCJIb21lXCIgaWNvbj1cImhvbWVcIj48L3VpNS1zaWRlLW5hdmlnYXRpb24taXRlbT5cbiAgICAgICAgICAgIDx1aTUtc2lkZS1uYXZpZ2F0aW9uLWl0ZW0gdGV4dD1cIkhvbWVcIiBpY29uPVwiaG9tZVwiPjwvdWk1LXNpZGUtbmF2aWdhdGlvbi1pdGVtPlxuICAgICAgICAgICAgPHVpNS1zaWRlLW5hdmlnYXRpb24taXRlbSB0ZXh0PVwiSG9tZVwiIGljb249XCJob21lXCI-PC91aTUtc2lkZS1uYXZpZ2F0aW9uLWl0ZW0-XG4gICAgICAgICAgICA8dWk1LXNpZGUtbmF2aWdhdGlvbi1pdGVtIHRleHQ9XCJIb21lXCIgaWNvbj1cImhvbWVcIj48L3VpNS1zaWRlLW5hdmlnYXRpb24taXRlbT5cbiAgICAgICAgICAgIDx1aTUtc2lkZS1uYXZpZ2F0aW9uLWl0ZW0gdGV4dD1cIkhvbWVcIiBpY29uPVwiaG9tZVwiPjwvdWk1LXNpZGUtbmF2aWdhdGlvbi1pdGVtPlxuICAgICAgICAgICAgPHVpNS1zaWRlLW5hdmlnYXRpb24taXRlbSB0ZXh0PVwiUGVvcGxlXCIgZXhwYW5kZWQgaWNvbj1cImdyb3VwXCI-XG4gICAgICAgICAgICAgICAgPHVpNS1zaWRlLW5hdmlnYXRpb24tc3ViLWl0ZW0gdGV4dD1cIkZyb20gTXkgVGVhbVwiPjwvdWk1LXNpZGUtbmF2aWdhdGlvbi1zdWItaXRlbT5cbiAgICAgICAgICAgICAgICA8dWk1LXNpZGUtbmF2aWdhdGlvbi1zdWItaXRlbSB0ZXh0PVwiRnJvbSBPdGhlciBUZWFtXCI-PC91aTUtc2lkZS1uYXZpZ2F0aW9uLXN1Yi1pdGVtPlxuICAgICAgICAgICAgPC91aTUtc2lkZS1uYXZpZ2F0aW9uLWl0ZW0-XG4gICAgICAgICAgICA8dWk1LXNpZGUtbmF2aWdhdGlvbi1pdGVtIHRleHQ9XCJMb2NhdGlvbnNcIiBpY29uPVwibG9jYXRlLW1lXCIgc2VsZWN0ZWQ-PC91aTUtc2lkZS1uYXZpZ2F0aW9uLWl0ZW0-XG4gICAgICAgICAgICA8dWk1LXNpZGUtbmF2aWdhdGlvbi1pdGVtIHRleHQ9XCJFdmVudHNcIiBpY29uPVwiY2FsZW5kYXJcIj5cbiAgICAgICAgICAgICAgICA8dWk1LXNpZGUtbmF2aWdhdGlvbi1zdWItaXRlbSB0ZXh0PVwiTG9jYWxcIj48L3VpNS1zaWRlLW5hdmlnYXRpb24tc3ViLWl0ZW0-XG4gICAgICAgICAgICAgICAgPHVpNS1zaWRlLW5hdmlnYXRpb24tc3ViLWl0ZW0gdGV4dD1cIk90aGVyc1wiPjwvdWk1LXNpZGUtbmF2aWdhdGlvbi1zdWItaXRlbT5cbiAgICAgICAgICAgICAgICA8dWk1LXNpZGUtbmF2aWdhdGlvbi1zdWItaXRlbSB0ZXh0PVwiRXh0ZXJuYWwgTGlua1wiIGhyZWY9XCJodHRwczovL3NhcC5jb21cIiB0YXJnZXQ9XCJfYmxhbmtcIj5cblx0XHRcdFx0PC91aTUtc2lkZS1uYXZpZ2F0aW9uLXN1Yi1pdGVtPlxuICAgICAgICAgICAgPC91aTUtc2lkZS1uYXZpZ2F0aW9uLWl0ZW0-XG5cdFx0XHQ8dWk1LXNpZGUtbmF2aWdhdGlvbi1pdGVtIHNsb3Q9XCJmaXhlZEl0ZW1zXCIgdGV4dD1cIlVzZWZ1bCBMaW5rc1wiIGljb249XCJjaGFpbi1saW5rXCI-XG5cdFx0XHRcdDx1aTUtc2lkZS1uYXZpZ2F0aW9uLXN1Yi1pdGVtIHRleHQ9XCJFeHRlcm5hbCBMaW5rXCIgaHJlZj1cImh0dHBzOi8vc2FwLmNvbVwiIHRhcmdldD1cIl9ibGFua1wiPlxuXHRcdFx0XHQ8L3VpNS1zaWRlLW5hdmlnYXRpb24tc3ViLWl0ZW0-XG5cdFx0XHQ8L3VpNS1zaWRlLW5hdmlnYXRpb24taXRlbT5cblx0XHRcdDx1aTUtc2lkZS1uYXZpZ2F0aW9uLWl0ZW0gc2xvdD1cImZpeGVkSXRlbXNcIiB0ZXh0PVwiSGlzdG9yeVwiIGljb249XCJoaXN0b3J5XCI-XG5cdFx0XHQ8L3VpNS1zaWRlLW5hdmlnYXRpb24taXRlbT5cbiAgICAgICAgPC91aTUtc2lkZS1uYXZpZ2F0aW9uPlxuICAgICAgICA8ZGl2IGNsYXNzPVwiY29udGVudFwiPjwvZGl2PlxuICAgIDwvZGl2PlxuICAgIDwhLS0gcGxheWdyb3VuZC1mb2xkIC0tPlxuICAgIDxzY3JpcHQgdHlwZT1cIm1vZHVsZVwiIHNyYz1cIm1haW4uanNcIj48L3NjcmlwdD5cbjwvYm9keT5cblxuPC9odG1sPlxuPCEtLSBwbGF5Z3JvdW5kLWZvbGQtZW5kIC0tPlxuIn0sIm1haW4uanMiOnsibmFtZSI6Im1haW4uanMiLCJjb250ZW50IjoiLyogcGxheWdyb3VuZC1oaWRlICovXG5pbXBvcnQgXCIuL3BsYXlncm91bmQtc3VwcG9ydC5qc1wiO1xuLyogcGxheWdyb3VuZC1oaWRlLWVuZCAqL1xuaW1wb3J0IFwiQHVpNS93ZWJjb21wb25lbnRzL2Rpc3QvQnV0dG9uLmpzXCI7XG5cbmltcG9ydCBcIkB1aTUvd2ViY29tcG9uZW50cy1maW9yaS9kaXN0L1NpZGVOYXZpZ2F0aW9uLmpzXCI7XG5pbXBvcnQgXCJAdWk1L3dlYmNvbXBvbmVudHMtZmlvcmkvZGlzdC9TaWRlTmF2aWdhdGlvbkl0ZW0uanNcIjtcbmltcG9ydCBcIkB1aTUvd2ViY29tcG9uZW50cy1maW9yaS9kaXN0L1NpZGVOYXZpZ2F0aW9uU3ViSXRlbS5qc1wiO1xuaW1wb3J0IFwiQHVpNS93ZWJjb21wb25lbnRzLWZpb3JpL2Rpc3QvU2hlbGxCYXIuanNcIjtcbmltcG9ydCBcIkB1aTUvd2ViY29tcG9uZW50cy1maW9yaS9kaXN0L1NoZWxsQmFySXRlbS5qc1wiO1xuXG5pbXBvcnQgXCJAdWk1L3dlYmNvbXBvbmVudHMtaWNvbnMvZGlzdC9ob21lLmpzXCI7XG5pbXBvcnQgXCJAdWk1L3dlYmNvbXBvbmVudHMtaWNvbnMvZGlzdC9ncm91cC5qc1wiO1xuaW1wb3J0IFwiQHVpNS93ZWJjb21wb25lbnRzLWljb25zL2Rpc3QvbWVudS5qc1wiO1xuaW1wb3J0IFwiQHVpNS93ZWJjb21wb25lbnRzLWljb25zL2Rpc3QvbG9jYXRlLW1lLmpzXCI7XG5pbXBvcnQgXCJAdWk1L3dlYmNvbXBvbmVudHMtaWNvbnMvZGlzdC9jYWxlbmRhci5qc1wiO1xuaW1wb3J0IFwiQHVpNS93ZWJjb21wb25lbnRzLWljb25zL2Rpc3QvaGlzdG9yeS5qc1wiO1xuaW1wb3J0IFwiQHVpNS93ZWJjb21wb25lbnRzLWljb25zL2Rpc3Qvc291cmNlLWNvZGUuanNcIjtcbmltcG9ydCBcIkB1aTUvd2ViY29tcG9uZW50cy1pY29ucy9kaXN0L2JhY2tncm91bmQuanNcIjtcbmltcG9ydCBcIkB1aTUvd2ViY29tcG9uZW50cy1pY29ucy9kaXN0L2FjdGl2aXR5LWFzc2lnbmVkLXRvLWdvYWwuanNcIjtcbmltcG9ydCBcIkB1aTUvd2ViY29tcG9uZW50cy1pY29ucy9kaXN0L2FjdGlvbi1zZXR0aW5ncy5qc1wiO1xuaW1wb3J0IFwiQHVpNS93ZWJjb21wb25lbnRzLWljb25zL2Rpc3QvY2hhaW4tbGluay5qc1wiO1xuXG52YXIgc2lkZW5hdiA9IGRvY3VtZW50LnF1ZXJ5U2VsZWN0b3IoXCJ1aTUtc2lkZS1uYXZpZ2F0aW9uXCIpO1xuZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoXCJ0b2dnbGVcIikuYWRkRXZlbnRMaXN0ZW5lcihcImNsaWNrXCIsICgpID0-IHtcbiAgICBzaWRlbmF2LnRvZ2dsZUF0dHJpYnV0ZShcImNvbGxhcHNlZFwiKTtcbn0pOyJ9LCJtYWluLmNzcyI6eyJuYW1lIjoibWFpbi5jc3MiLCJjb250ZW50IjoidWk1LXNpZGUtbmF2aWdhdGlvbiB7XG4gICAgaGVpZ2h0OiA2MDBweDtcbn1cblxudWk1LXNoZWxsYmFyOjpwYXJ0KHJvb3QpIHtcbiAgICBwYWRkaW5nLWlubGluZS1zdGFydDogMC43NXJlbTtcbiAgICBwYWRkaW5nLWlubGluZS1lbmQ6IDEuMjVyZW07XG4gICAgYm9yZGVyLXJhZGl1czogMC41cmVtO1xuICAgIGJveC1zaGFkb3c6XG4gICAgICAgIDAgMCAwLjEyNXJlbSAwIGNvbG9yLW1peChpbiBzcmdiLCB2YXIoLS1zYXBDb250ZW50X1NoYWRvd0NvbG9yKSAxNiUsIHRyYW5zcGFyZW50KSxcbiAgICAgICAgMCAwLjVyZW0gMXJlbSAwIGNvbG9yLW1peChpbiBzcmdiLCB2YXIoLS1zYXBDb250ZW50X1NoYWRvd0NvbG9yKSAxNiUsIHRyYW5zcGFyZW50KTtcbn1cblxuLnRvb2wtbGF5b3V0IHtcbiAgICBwYWRkaW5nOiAwLjVyZW0gMC41cmVtIDAgMC41cmVtO1xuICAgIGJhY2tncm91bmQ6IGNvbG9yLW1peChpbiBzcmdiLCBibGFjayA0JSwgdmFyKC0tc2FwQmFja2dyb3VuZENvbG9yKSk7XG4gICAgZGlzcGxheTogZ3JpZDtcbiAgICBnYXA6IDAuNXJlbTtcbiAgICBncmlkLXRlbXBsYXRlLXJvd3M6IGF1dG8gMWZyO1xuICAgIGdyaWQtdGVtcGxhdGUtY29sdW1uczogYXV0byAxZnI7XG59XG5cbnVpNS1zaGVsbGJhciB7XG4gICAgZ3JpZC1jb2x1bW46IDEgLyBzcGFuIDI7XG4gICAgZ3JpZC1yb3c6IDEgLyAyO1xufVxuXG4uY29udGVudCB7XG4gICAgcG9zaXRpb246IHJlbGF0aXZlO1xuICAgIGJhY2tncm91bmQ6IHZhcigtLXNhcEJhY2tncm91bmRDb2xvcik7XG4gICAgYm9yZGVyLXJhZGl1czogMC41cmVtIDAuNXJlbSAwIDA7XG4gICAgYm94LXNoYWRvdzpcbiAgICAgICAgMCAwIDAuMTI1cmVtIDAgY29sb3ItbWl4KGluIHNyZ2IsIHZhcigtLXNhcENvbnRlbnRfU2hhZG93Q29sb3IpIDE2JSwgdHJhbnNwYXJlbnQpLFxuICAgICAgICAwIDAuNXJlbSAxcmVtIDAgY29sb3ItbWl4KGluIHNyZ2IsIHZhcigtLXNhcENvbnRlbnRfU2hhZG93Q29sb3IpIDE2JSwgdHJhbnNwYXJlbnQpO1xufSJ9fQ

Steps to Reproduce

1. Open the given sample
2. Click the ui5-navigation-item with text "More Items"
3. See the item "People"
4. Hover the arrow icon and observe

Log Output, Stack Trace or Screenshots

2025-03-17_15-50-08.mp4

Priority

Low

UI5 Web Components Version

1.24

Browser

Chrome

Operating System

No response

Additional Context

No response

Organization

No response

Declaration

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