[Select] Broken Interoperability with redux-form due to SyntheticEvent

[ctavan]

Expected Behavior

The onChange prop of Select should work the same way as the onChange prop of Input.

Current Behavior

The onChange of Select seems to emit an event, that cannot be detected as being a react SyntheticEvent by redux-form.

Context

Redux-form uses the following introspection of events to determine if they are assumed to be a react SyntheticEvent (and thus if the value should be extracted from event.target.value) like this:

https://github.com/erikras/redux-form/blob/93f6e44f9d593f5ff50dc39466390885f34526f2/src/events/isEvent.js#L2-L5

This was introduced and discussed in redux-form/redux-form#181 under the assumption taken from the React documentation that states:

Every SyntheticEvent object has the following attributes:

boolean bubbles
boolean cancelable
DOMEventTarget currentTarget
boolean defaultPrevented
number eventPhase
boolean isTrusted
DOMEvent nativeEvent
void preventDefault()
boolean isDefaultPrevented()
void stopPropagation()
boolean isPropagationStopped()
DOMEventTarget target
number timeStamp
string type

It seems that this code in the SelectInput. handleItemClick() method

https://github.com/callemall/material-ui/blob/438dd7f7fc14f504f0e385fef1719ee6674fa3ca/src/Select/SelectInput.js#L139-L147

which is supposed to "extend" the original SyntheticEvent somehow drops the preventDefault() and stopPropagation() methods. To illustrate this here are screenshots from the developer console that output the original event in the handleItemClick method and the result of {...event}:

Original event:

Extended {...event}:

As you can see preventDefault() and stopPropagation() somehow don't survive the extension.

Is there a better way to overwrite the event.target.value of the original synthetic event?

Your Environment

Tech	Version
Material-UI	1.0.0-beta.12

[cherniavskii]

The reason preventDefault and stopPropagation methods are missing in extended event is, that those methods are stored in event prototype, not event itself.
Calling event.persist() and overwriting value property should solve this issue.
I can give it a try later.

[ctavan]

You're awesome, @cherniavskii ! I can't wait to try this as soon as the next beta release is out. Thank you so much for your help!

[cherniavskii]

@ctavan You are welcome :)