React-redux-form: change actions not firing with material-ui react components

[CoinGame]

I'm trying to use the material-ui react components with react-redux-form.

I have a material-ui toggle that i'm passing into a control for a checkbox.

  toggleHidden = (model, value) =>{
    this.props.dispatch(dispatch => {
      dispatch(actions.toggle(model, value))
    });
  }

 <Control.checkbox
  className="form-control"
  model=".hidden"
  updateOn="change"
  changeAction={this.toggleHidden}
/>

this works file with vanilla rrf, but now i'm trying to get more into customized components.

  import Toggle from 'material-ui/Toggle'

  toggleHidden = (model, value) =>{
    this.props.dispatch(dispatch => {
      dispatch(actions.toggle(model, value))
    });
  }

 <Control.checkbox
  className="form-control"
  model=".hidden"
  component={Toggle}
  updateOn="change"
  changeAction={this.toggleHidden}
/>

The problem i'm having here is that change does not fire anymore on clicking the toggle element. If I modify updateOn="focus" then it will actually update the redux state. I'm struggling to figure out why change will not fire on click

[davidkpiano]

Can you put up a reproduction on www.esnextb.in? You can use this code as a starting point:

import React from 'react';
import ReactDOM from 'react-dom';
import { LocalForm, Control } from 'react-redux-form';
import Toggle from 'material-ui/Toggle'
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';

class MyApp extends React.Component {
  handleChange(values) { console.log({values}) }
  handleUpdate(form) { console.log({form}) }
  render() {
    return (
      <MuiThemeProvider>
        <LocalForm
          onUpdate={(form) => this.handleUpdate(form)}
          onChange={(values) => this.handleChange(values)}
        >
          <Control
            className="form-control"
            model=".hidden"
            component={Toggle}
            updateOn="change"
          />
        </LocalForm>
      </MuiThemeProvider>
    );
  }
}

ReactDOM.render(<MyApp />, document.querySelector('#app'))

[davidkpiano]

Mystery solved - Material-UI's <Toggle> component uses onToggle, not onChange (for whatever reason... :roll_eyes:), so to make changeAction work, you need to map onToggle to onChange like this:

          <Control
            className="form-control"
            model=".hidden"
            component={Toggle}
+           mapProps={{onToggle: (props) => props.onChange}}
            changeAction={(model, value) => {console.log(model,value)}}
          />

[CoinGame]

Oh man I really appreciate you digging deeper on that. It was a low priority styling thing for me so I didn't have a chance to jump on the reproduction request. When I get back around to styling I'll give this a shot. Either way thanks - you the best.