List: focusin event doesn't bubble

[Lukas742]

Bug Description

This is a followup issue to this issue:
SAP/ui5-webcomponents-react#6294

The focusin event of the List component doesn't bubble which prevents the synthetic onFocus event of React to work correctly (internally it implements focusin for the native event). React example.

Also, it is not possible registering the focusin event of the ui5-list element itself, for example to identify which ui5-li is focused. Of course, one could register a focusin event for each ui5-li, but it would be much easier to just add it to the parent component. The standard is, that focusin events bubble, if that's no possible for this implementation, I think it would be worth mentioning that in the docs.

I've edited the example of the linked issue to show this behavior: plain ui5wc example

Affected Component

No response

Expected Behaviour

The focusin event should bubble.

Isolated Example

https://stackblitz.com/edit/github-pwfft8?file=index.html,main.js

Steps to Reproduce

1. See StackBlitz example
2. Navigate through list via keyboard keys (Tab for enter, arrow keys for list items)
3. Navigate through buttons via keyboard keys (Tab)
4. See the difference

Log Output, Stack Trace or Screenshots

No response

Priority

None

UI5 Web Components Version

2.1.2

Browser

Chrome, Edge, Firefox, Safari

Operating System

No response

Additional Context

No response

Organization

UI5WCR

Declaration

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

[kskondov]

Hello @ui5-webcomponents-topic-p,

Can you please take a look at the reported issue and check the possibilities to bubble the focusin event or document that it does not as proposed by @Lukas742

Best Regards,
Konstantin

[NakataCode]

Hi @Lukas742 ,

You can attach the "item-focused" event to the list component to track the focused ui5-li item.
Would this approach work for your scenario?

[Lukas742]

Hi @NakataCode

the item-focused event is a private event and using private APIs is something that should generally be avoided right? Also, how should developers know that they should use this event?

Another problem is, that our wrapper only wraps public events, so developers would need to attach the event listener themselves and can't use React props to achieve this.

[github-actions]

Hello, everyone! The issue has been inactive for 21 days. If there are still questions or comments, please feel free to continue the discussion. Inactive issues will be closed after 7 days!

[Lukas742]

@NakataCode this issue is still relevant, if there's additional information required please let me know.