Checkbox not updating about formsy-material-ui HOT 26 CLOSED

using react-starter-kit same problem until change change our BrowserSync config ghostMode: false

...and...worked... \o/

from formsy-material-ui.

I've updated formsy-mui-demo to current versions ([email protected] and [email protected]), (which I should have done sooner!), and can't reproduce this issue.

Can you post or link to your code?

from formsy-material-ui.

@mbrookes I can't share the whole project but I extracted the files that are involved.
I use redux and the component is rendered under route App -> Settings -> Network.

The form that is rendered you can find in Network.js.
When clicking on the checkbox I have some animation that illustrate the click but nothing is changing.

Here you find my gist : https://gist.github.com/DriesS/4c8d799e87cca7794a38

from formsy-material-ui.

I don't know why that doesn't work, sorry. You might find the chrome React devtool helps you diagnose.

from formsy-material-ui.

@mbrookes did some further investigation and it looks like the value received in handleValueChange is always true or false ( depending how I set defaultChecked ).

handleValueChange: function handleValueChange(event, value) {
    this.setValue(value);
    if (this.props.onChange) this.props.onChange(event, value);
  },

Any idea why the value that I receive is always the initial value? When adding a breakpoint at :

this.setValue(value); 

and changing the value myself to true, after the checkbox is checked.
UPDATE : when I comment out the following line in the formsy-material-ui/FormsyCheckBox component

  componentDidMount: function componentDidMount() {
    // this.setValue(this._muiComponent.isChecked());
  },

The first time when I click the state is correctly updated but after it isn't working anymore. Then the click event is always passing the new value to the handleClick event.

from formsy-material-ui.

What version of Material-UI are you running, and could this be related? mui/material-ui#2983

from formsy-material-ui.

@mbrookes [email protected]

from formsy-material-ui.

Mmm, okay, no 0.14.4 is fine here. Might be worth you trying 0.15.0-alpha.1 just in case.

from formsy-material-ui.

@mbrookes another important detail I found out is that I have this bug only in chrome. Don't have this issue in Firefox and Safari.

from formsy-material-ui.

I'm testing in Chrome (OS X). Weird!

from formsy-material-ui.

I'm experiencing the same issue, too.

Chrome  48.0.2564.116 (공식 빌드) m (32비트)
revision    700a0e589ecfa7e0f65cace17e2f75470c4adf9d-refs/branch-heads/2564@{#706}
OS  Windows 
Blink   537.36 (@700a0e589ecfa7e0f65cace17e2f75470c4adf9d)
JavaScript  V8 4.8.271.20
Flash   20.0.0.306
userAgent   Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/48.0.2564.116 Safari/537.36

from formsy-material-ui.

Microsoft Edge 25.10586.0.0
Microsoft EdgeHTML 13.10586

It happens to Edge, too.
And I tested these two on Windows 10.

from formsy-material-ui.

This seems like a little tricky problem.

handleValueChange: function handleValueChange(event, value) {
  console.log(value);
  this.setValue(value);
  if (this.props.onChange) this.props.onChange(event, value);
},

Like this, This value argument is given as the value of the checkbox before it was clicked for Chrome on both Windows 10 and Mac OS X El Capitan.

So I should have override this function to be like this

handleValueChange: function handleValueChange(event, value) {
  this.setValue(!value);
  if (this.props.onChange) this.props.onChange(event, !value);
},

But this time, this didn't work for Safari and Firefox.

I tried several os's and browsers and this is the result with "[email protected]".

OS                    | Browser    | Worked
Windows 10            | Chrome     | X
Windows 10            | Edge       | X
Mac OS X El Capitan   | Chrome     | X
Mac OS X El Capitan   | Safari     | O
Mac OS X El Capitan   | Firefox    | O

I followed the codes with onChange into the enhanced-button.jsx,

and I'm suspecting that this function works differently among browsers.

(from https://github.com/callemall/material-ui/blob/v0.14.4/src/enhanced-switch.jsx#L235)

_handleChange(e) {
  this._tabPressed = false;
  this.setState({
    isKeyboardFocused: false,
  });

  let isInputChecked = ReactDOM.findDOMNode(this.refs.checkbox).checked;

  if (!this.props.hasOwnProperty('checked')) {
    this.props.onParentShouldUpdate(isInputChecked);
  }
  if (this.props.onSwitch) {
    this.props.onSwitch(e, isInputChecked);
  }
},

I will look into it when I got home.

I need some comments and helps because I started node just a week ago.

from formsy-material-ui.

@TintypeMolly Thanks for the detailed analysis!.

@alitaheri - sorry to bother you, but could use your brains on this one!

from formsy-material-ui.

Hmm I'm guessing this is a race condition. I wonder what would happen if _handleChange was differed. can someone try:

_handleChange(e) {
  this._tabPressed = false;
  this.setState({
    isKeyboardFocused: false,
  });
  setTimeout(() => {
    let isInputChecked = ReactDOM.findDOMNode(this.refs.checkbox).checked;

    if (!this.props.hasOwnProperty('checked')) {
      this.props.onParentShouldUpdate(isInputChecked);
    }
    if (this.props.onSwitch) {
      this.props.onSwitch(e, isInputChecked);
    }
  });
},

at the mui's source code? https://github.com/callemall/material-ui/blob/v0.14.4/src/enhanced-switch.jsx#L235

from formsy-material-ui.

the workaround would to to manually maintain the checked value. https://github.com/mbrookes/formsy-material-ui/blob/master/src/FormsyCheckbox.jsx can have a state to toggle handle this.state.checked whenever handleValueChange is called. I'm this is material-ui related, but for now that might work around this issue.

from formsy-material-ui.

Thanks @alitaheri, appreciate the input. If we can fix this at source, that would be preferable.

I can't test here, since it works for me across all browsers, but hopefully @TintypeMolly and @DriesS can try your _handleChange fix.

from formsy-material-ui.

The EnhancedSwitch component needs total rework O.O

from formsy-material-ui.

toggle handle this.state.checked whenever handleValueChange is called

That saved my day. Thanks @alitaheri

Hope EnhancedSwitch can be fixed soon 👍

from formsy-material-ui.

Glad I could help. can anyone confirm whether my proposed solution for material-ui can work? 😅 I can't do it my self without having to learn formsy and this library, as this issue is only raised with this library 😅

from formsy-material-ui.

below worked for me. @alitaheri

import React from 'react';
import Formsy from 'formsy-react';
import Checkbox from 'material-ui/lib/checkbox';
import { _setMuiComponentAndMaybeFocus } from 'formsy-material-ui/lib/utils';

let FormsyCheckbox = React.createClass({
  mixins: [ Formsy.Mixin ],

  propTypes: {
    name: React.PropTypes.string.isRequired
  },

  handleValueChange: function (event, _value) {
    const value = !this.getValue();
    this.setValue(value);
    if (this.props.onChange) this.props.onChange(event, value);
  },

  componentDidMount: function () {
    this.setValue(this._muiComponent.isChecked());
  },

  _setMuiComponentAndMaybeFocus: _setMuiComponentAndMaybeFocus,

  render: function () {
    return (
      <Checkbox
        {...this.props}
        ref={this._setMuiComponentAndMaybeFocus}
        onCheck={this.handleValueChange}
        checked={this.getValue()}
      />
    );
  }
});

module.exports = FormsyCheckbox;

from formsy-material-ui.

@TintypeMolly thanks, is working here also.

from formsy-material-ui.

Could one of you please check whether this works so we can fix it at source?

from formsy-material-ui.

@mbrookes changing the code of _handleChange isn't working here.

from formsy-material-ui.

Closing this since it's a MUI issue. In the meantime, glad @alitaheri's workaround helps. Thanks @alitaheri!

from formsy-material-ui.

Anytime ( ^_^ )

from formsy-material-ui.