Select value change event not bubbling up

[thorn axle]

I have a fairly large form that I need to submit when a new value is selected in three different dropdowns (icky)--I am using the latest version of React Router, and was hoping to catch the change events in an onChange listener on the Form component, and evaluate whether I should submit based on the name of the element.

The problem is, change events in the Select components don't appear to be bubbling up to the Form component--TextInput and NumberInput and DatePicker, however, all display the expected behavior of an HTMLInputElement and events propagate up to the Form.

It's a large form with 30+ fields and a lot of conditional rendering inside of it, so switching it over to all controlled inputs would be a major pain--does anyone have any advice for resolving the issue of changeEvents not bubbling up from Select components?

Edit: And actually, I lied. DatePicker also does not propagate--but that's not an issue so much. The NumberInput change event seems to bubble up when a number is entered via keyboard, but not when it is incremented or decremented via clicking the up and down arrows. This behavior doesn't really matter to me in this particular instance, but felt I should clarify what I said in the above post.

[brisk laurel]

Custom inputs do not propagate events, you need to use controlled component for this

[thorn axle]

@brisk laurel I appreciate your response--I'm assuming that even manually dispatching the event inside the onChange is futile because it's blocked by a stopPropagation ? The behavior makes sense in some regards, but it certainly is a bummer to not be able to listen to changes in the form.

Time for some hackery, I s'pose.

[brisk laurel]

The events are not dispatching, onChange function is called. For date pickers it is not even possible to transfer input value this way because components operate with Date objects.