[AnalyticalTable]: [Focus doesn't shift into ResponsivePopover content upon clicking interactive Icon]

[kwxue]

Describe the bug

There is an interactive Icon within an AnalyticalTable column. When activating the Icon, it opens a ResponsivePopover.

Upon clicking the interactive Icon that opens a ResponsivePopover, the focus does not go to the ResponsivePopover contents. Instead, the focus goes to a checkbox cell of the AnalyticalTable (MultiSelect Mode).

Isolated Example

https://codesandbox.io/p/sandbox/vigilant-mountain-ltgz5t?file=%2Fsrc%2FSampleAnalyticalTable.tsx%3A31%2C9

Reproduction steps

1. Open sandbox https://codesandbox.io/p/sandbox/vigilant-mountain-ltgz5t?file=%2Fsrc%2FSampleAnalyticalTable.tsx%3A31%2C9
2. Activate the interactive Icon by clicking or SPACE / ENTER
3. See the focus go to a checkbox cell

Expected Behaviour

Expect the ResponsivePopover contents to be focused, in this case, the Link.

Screenshots or Videos

https://github.com/SAP/ui5-webcomponents-react/assets/55603752/fb581b6b-1eeb-417b-8dc6-09e602141abd

UI5 Web Components for React Version

1.20.0

UI5 Web Components Version

1.18.0

Browser

Chrome

Operating System

Mac OS

Additional Context

In the isolated example, the bug does not occur if when there are two or less rows, but does occur when there 3 or more rows. This occurs in the default SelectionMode as well.

However, in the real application, it's occurring even with 2 or less rows, so not sure if the number of rows is the true underlying cause.

Also, if the children of the Responsive Popover is a List with StandardListItem(s) the focus goes to the list item as expected.

Relevant log output

No response

Declaration

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

[Lukas742]

Hi @kwxue

the focus event is bubbling up to the table, so you either have to make sure to prevent event propagation by calling event.stopPropagation() (codeSandbox) in the respective event handler, or move the popover outside of your table. Using createPortal mounts the popover outside, but doesn't change the order of React event bubbling. Also, mounting a popover in each cell could become very costly for large datasets.

[kwxue]

Thanks @Lukas742 , makes sense!