[IgcExpansionPanelComponent] - Missing Opening and Opened events and onExpanded doesn't fire

[mddifilippo89]

Description

In blazor there is an Opening/Opened event for the ExpansionPanel. These don't appear to be included in WC for some reason. Also the Expanded event exists in WC but doesn't fire, also not in Blazor so I couldn't reproduce the behavior in the attached example

Issue 1

WC is missing Opening events/OnExpanded doesn't fire https://codesandbox.io/s/eloquent-brown-w7xq6d

Issue #2 Review attachment, expand child panels with a breakpoint on the parent event for Opening.

I don't know if nesting expansion panels is supported or not but I haven't noticed anything.

Attachments

Attach a sample if available, and screenshots, if applicable.

[rkaraivanov]

@mddifilippo89

Issue 1 The expansion panel supports these events: https://github.com/IgniteUI/igniteui-webcomponents/wiki/Expansion-Panel#events The expansion panel does not have an expanded event since this scenario is covered by igcOpened. Looking through the Blazor transpiled code, it seems they are exposed and even expose the source panel of the event as an event argument. Whether there is a problem with how binding to them happens in Blazor, I cannot say.

Here is the updated sample for vanilla JS

Issue 2 Nesting expansion panels is supported. You can listen for relevant events on the parent, through event delegation as the events do bubble up the DOM. If you check the modified sample, you'll see that events for the child panel are also logged.

[stany9g]

Hello @mddifilippo89 @rkaraivanov

the issue is not exactly well written as what it meant to be. There are events firing opening, closing, opened, closed that works fine in Blazor.

What does not seem alright is that those events are provided by EventCallbacks so you can hook up some logic when those events occurs. EventCallbacks should not bubble up.

What can bubble up are raw events like onclick which you can stop by specifying onclick:preventDefault="true" etc. unfortunately there are not raw events like igcOpened which you could hook and stop bubble from.

Initial state parent panel with two children

Then I click on Child panel to open and you can see that parent EventCallback logic (append a text) is triggered even though parent is not opening

Another child another text appending

I hope it makes sense what is the issue.

Thank you

Stan

[rkaraivanov]

@stany9g

The custom events emitted from the component are "raw" DOM events, exposing the standard set of event properties. Attaching a Javascript event handler and calling stopPropagation() inside it, will prevent the event from bubbling up the DOM tree.

Having these events bubble by default is useful for event delegation scenarios.

I suppose Blazor handles a subset/all of the Global event handlers in the browser, where the

<component on[event]:preventDefault="true"></component>

syntax works by default.

In the case of custom events that feature will probably not work.

Having said all that, I suggest to either handle the events in the Javascript context or direct the issue to our Blazor issue tracker for more information in the context of a Blazor application.