StandardListItem: It is not possible to get the list item data by clicking on it

[CristianDDias]

Describe the bug
It is not possible to get the list item data by clicking on it using the onItemClick event from the <List>. The onItemClick event fires a callback function, which receives an event as parameter. Using this event, I can't get the list item data. In my example, I have a list of product objects, which have the properties id and name. In the <StandardListItem> I just use the name property. How can I get the product object from the list of product objects when I click on the list item? Also, I'm using TypeScript, what don't allow me to use a React Element as a children of the <StandardListItem> (in the codesandbox bellow I'm using JavaScript, which allows me to do that).

To Reproduce
https://codesandbox.io/s/intelligent-waterfall-gggot

Steps to reproduce the behavior:

1. Click on any list item from the first list.
2. See on the log console the logged event.
3. Click on any list item from the second list.
4. See on the log console the logged product id.

Expected behavior
I think each <StandardListItem> should have its own onClick method. A good example is the <ListItem> component from the Material-UI library, which accepts an onClick method.

Desktop (please complete the following information):

• OS: Windows 10
• Browser: Chrome
• Version: 76

[vbersch]

Hi,

Thank you for reaching out to us.

See this example on how to get the id of your list item:
https://codesandbox.io/embed/naughty-matsumoto-jiuuy

You basically have to attach your id as a data attribute to the StandardListItem.
After that, you can retrieve your list item data with that id. This is currently the standard
UI5 StandardListItem Web Component way of doing this.

Regarding your second question:
In the UI5 Web Components API reference, passing something else to the StandardListItem than a string is strongly discouraged: See the slots part in the StandardListItem Reference

However, if you really want to pass a React/HTML Element at the moment you could do it like this to get rid of the TypeScript Error:

<StandardListItem selected> { <div>Test</div> as any } </StandardListItem>

Should we expand the typing to accept ReactNode as well @MarcusNotheis ?

[CristianDDias]

Hi!

I don't know if you put the right codesandbox link or what happened, but my code and your code is the same.

I'm a little bit confused, you said that I need to attach my id as data attribute to the <StandardListItem>. Would it be something like this?

<StandardListItem key={product.id} icon="globe" data-id={product.id}>
   {product.name}
</StandardListItem>

[vbersch]

Sorry, for some reason my changes weren´t saved.
There you go: https://codesandbox.io/embed/naughty-matsumoto-jiuuy

[CristianDDias]

Is there any problem by accessing the data id using the following code?

event.originalEvent.detail.item.dataset.id

[vbersch]

Nope, thats perfectly fine as well. originalEvent contains the event that the StandardListItem UI5 Web Component fires. We encapsulate that in our own Event.

You could also do event.getParameter("item").dataset.id

Whatever suits you best.

[CristianDDias]

Thank you a lot 😊

I will close the issue.