React onChange events not bubbling up on unmount

Do you want to request a feature or report a bug?

I’m reporting a bug.

What is the current behavior?

When attaching an onChange handler to a JSX element, if calling this handler leads to the element being unmounted, then the onChange event never bubbles up in the DOM. This means you can’t listen to it on the document, or basically on anything else than the element itself.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem.

Example code here: https://codesandbox.io/s/qkr8j85z8j Try it out here: https://qkr8j85z8j.codesandbox.io

Open the console and click around a bit. You will notice that the single checkbox that never changes it’s position triggers both onClick and onChange listeners whereas the other checkboxes that get moved between lists only trigger onClick events.

What is the expected behavior?

I would expect the onChange event to be handled in the same way as the onClick event.

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?

Tested under these conditions:

• React 16.3.x and 16.4.x.
• MacOS 10.13.6
• Opera 54, Firefox Dev Edition 62, Chrome Canary 70

Behaviour has not changed between versions.

[jpkempf]

Thanks for the feedback! It sounds like my best bet at the moment is to await the outcome of #10830.

If I remove the onChange prop from the element and try to use native onChange listeners instead, the element would no longer be a controlled input, which would also be problematic. Our workaround at the moment is to trigger and listen for onClick events instead in cases where onChange would not bubble up. (This happens in an external script outside of React that exists for, sigh, tracking purposes.)

[stale[bot]]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please create a new issue with up-to-date information. Thank you!