[AnalyticalTable]: onRowClick runs when clicking menu option

[fernandademery]

Describe the bug

We are using a @ui5/webcomponents-react Menu component for an action column in AnalyticalTable. Since upgrading to V2, the click event in the MenuItem bubbles and triggers an onRowClick event. Using event.stopPropagation() on the MenuItem click handler doesn't prevent the bubbling, so we needed to include a workaround in the table row click handler to account for this possibility. I would like to know if this new behavior is intended or if it is a bug when handling the UI5 custom event.
If this is how you expect the menu items click events to behave, I would like to know if there is a recommended best practice for when the Menu is placed within another component that can also hold a click event, such as a table row.

Isolated Example

https://stackblitz.com/edit/vitejs-vite-cx3kv641?file=README.md

Reproduction steps

1. Load the app in stackblitz
2. Open the console
3. Click on the "overflow" icon button
4. Click the MenuItem
5. Check that, in the console, there's a log from the MenuItem click function and another one that comes from the onRowClick function
   ...

Expected Behaviour

If the MenuItem is clicked and event.stopPropagation() is set, the click should not bubble to the table row.

Screenshots or Videos

No response

UI5 Web Components for React Version

2.9.2

UI5 Web Components Version

2.9.0

Browser

Chrome

Operating System

No response

Additional Context

No response

Relevant log output

Organization

No response

Declaration

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

[Lukas742]

Hi @fernandademery

The ui5-menu-item is the target of the propagated click event, so to prevent the event from bubbling up, you need to call event.stopPropagation() in the respective handler. You can check the target via event.target in e.g. the onRowClick handler.
https://stackblitz.com/edit/vitejs-vite-cflitw2g?file=src%2Fmain.tsx,src%2FApp.tsx,src%2FActionMenu.tsx

In general, we recommend mounting Popovers or Dialogs like the Menu outside of the AnalyticalTable. Otherwise, a new instance will be created for every cell in which it is rendered. Depending on the complexity of your Menu, this can lead to a large number of DOM nodes - especially with large datasets - and virtualization can only help so much.

That said, I think we should add the MenuItem to the components list that doesn't invoke the row selection or click event. Therefore we'll treat this issue as Feature Request.

Btw., you forgot to add the ThemeProvider component in your example, hence the strange appearance of the component.

---

Since the click event is a native event, I don't think that propagation should be stopped per default. In case you feel differently, please open another issue in the ui5-webcomponents repo, as the Menu and all of its subcomponents are developed there.

[ui5-webcomponents-react-bot]

🎉 This issue has been resolved in version v2.13.0 🎉

The release is available on v2.13.0

Your semantic-release bot 📦🚀