[List]: Cannot read properties of null (reading 'item') in List.onItemToggle

[KayKadner]

Bug Description

We see via sentry that the error Cannot read properties of null (reading 'item') happens in line

    onItemToggle(e) {
        this.fireEvent("item-toggle", { item: e.detail.item });
    }

of @ui5/webcomponents/dist/List.js?:587:56

as in the onItemClose function above

	onItemClose(e: CustomEvent<ListItemCloseEventDetail>) {
		const target = e.target as UI5Element | null;
		const shouldFireItemClose = target?.hasAttribute("ui5-li-notification") || target?.hasAttribute("ui5-li-notification-group");

		if (shouldFireItemClose) {
			this.fireDecoratorEvent("item-close", { item: e.detail?.item });
		}
	}

also contains a optional chaining in this case, I'm wondering if this might just be forgotten in onItemToggle

This was observed in 1.24.24, but it's also there in the latest version:

webcomponents/packages/main/src/List.ts

Line 1422 in 9d4737f

this.fireDecoratorEvent("item-toggle", { item: e.detail.item });

Affected Component

List

Expected Behaviour

no exception.

Isolated Example

No response

Steps to Reproduce

sorry, this is only an observation of what happens on customer side.

Log Output, Stack Trace or Screenshots

Priority

None

UI5 Web Components Version

1.24.24

Browser

Chrome

Operating System

No response

Additional Context

No response

Organization

No response

Declaration

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

[nikoletavnv]

Hello @KayKadner,
Can you please give us more context when this onItemToggle fails with exception? What is the control used? Is it a ui5-list or other component deriving from the list?
According to the documentation "item-toggle" event is : Note: This event is only applicable to list items that can be toggled (such as notification group list items). I have tested with Notification list item and I am not able to reproduce it. Can you create a sample with isolated problem that can help us investigate further what is the cause?

Kind regards,
Nikoleta

[KayKadner]

unfortunately not. I have no stack trace on sentry nor any other idea of how to reproduce it. I just noticed that the method nearby (onItemClose) does what would be needed here. Maybe the one who added this in onItemClose knows how to produce this problem?

[nikoletavnv]

Hello @KayKadner,

Can you then try to isolate a sample or check what components are used when you get this console error?
You have made a screenshot with the error, can you check what Web Component is used - is it a list or notification list? What is the application in which you are getting this error - React, Angular, other ? Which is the customer and is it possible for us to debug the problem there?

I can't reproduce the issue with our samples, but maybe it is a more complex scenario, or the component is wrapped for React or other library.
Please provide us with some further information how to reproduce the problem.

Kind regards,
Nikoleta

[KayKadner]

HI @nikoletavnv ,

I just dug a bit further and found

• that there was something similar reported and fixed for UI5WC2 with Panel : onToggle event causes error due to unexpected propagation to ListItem's onToggle handler #11812.
• And that UI5WC 1 is out of maintenance since almost a year, so
• there is actually a stack trace in sentry, it was just collapsed for whatever reason. This indicates the same problem as the issue for WC2

I guess we should not waste more time here. Or is WC1 still patched?

[KayKadner]

Hi @nikoletavnv I now Claude managed to reproduce it: https://jsfiddle.net/o35bc7k9/