@onchange not bubbling in Blazor

[eeegs]

Describe the bug

When applying an event handler to a parent element, the on change from child controls does not bubble up. It does bubble up in reality as the framework registers document level event handlers. But whatever those handler do to distribute the event into underlying code does not allow for passing the event to non-input control types - that how I see it anyway.

This is not how the event is meant to work. I should be able to listen on a parent element for a change event from a child.

If you put the handler in the code below on the input, then all is fine. But that's not the thing I'm trying to do.

To Reproduce

Start with a clean WASM project, and change the Index.razor to this:

page "/"

<div @onchange="Fred">
    <input />
</div>

@changed

@code
{

    string changed = "Nope!";

    void Fred(ChangeEventArgs args)
    {
        changed = "yep!!";
    }
}

Exceptions (if any)

None seen

Further technical details

• Ver 5.08

[eeegs]

This file aspnetcore/src/Components/Web.JS/src/Rendering/Events/EventDelegator.ts has, in line 5, (see below) a const declaring change (and other events) as a nonBubblingEvent. However the HTML specification would indicate that abort, change, error, reset, scroll and submit from your const definition are meant to bubble.

It looks like after you scan the up the tree you then discard any found candidate in line 171: candidateElement = (eventIsNonBubbling || stopPropagationWasRequested) ? null : candidateElement.parentElement;

I contest your list of nonBubbling events is incorrect.

Offending code: aspnetcore/src/Components/Web.JS/src/Rendering/Events/EventDelegator.ts (line 5)

const nonBubblingEvents = toLookup([
  'abort',
  'blur',
  'change',
  'error',
  'focus',
  'load',
  'loadend',
  'loadstart',
  'mouseenter',
  'mouseleave',
  'progress',
  'reset',
  'scroll',
  'submit',
  'unload',
  'toggle',
  'DOMNodeInsertedIntoDocument',
  'DOMNodeRemovedFromDocument',
]);

[ghost]

We've moved this issue to the Backlog milestone. This means that it is not going to be worked on for the coming release. We will reassess the backlog following the current release and consider this item at that time. To learn more about our issue management process and to have better expectation regarding different types of issues you can read our Triage Process.

[eeegs]

Any movement on this? It should be simple fix.

[eeegs]

So who knows where the rubber duck comes from? Oh, and will this get fixed?

[mkArtakMSFT]

@SteveSandersonMS any thoughts regarding this one?

[halter73]

Here was the original change: dotnet/blazor#722

onchange does bubble though, it's just not cancellable. See:

https://en.wikipedia.org/wiki/DOM_event#Events
https://stackoverflow.com/questions/5574207/html-dom-which-events-do-not-bubble

[SteveSandersonMS]

@mkArtakMSFT Yep, would be good to make this behave the same as a native click event.