Comments (26)
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.
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.
Related Issues (20)
- Is there a component for file upload? HOT 1
- FormsySelect onChange getting bypassed HOT 3
- Support the incoming Material UI v1.0 HOT 10
- Text field underline color broken after 0.6.1 HOT 10
- FormsyText with type="number" bad behavior HOT 3
- FormsyAutoComplete does not use provided default value HOT 2
- FormsySelect required is not showing any error when submit the form HOT 9
- Remove FormsyAutoComplete component? HOT 1
- Warning: getDefaultProps
- FormsySelect does not change underline color when selected HOT 1
- Not working with React 16.1.1 HOT 1
- Support new Formsy
- Incorrect directory HOT 6
- Support formsy-react v1.1.2 HOT 4
- FormsyDate and FormsyTime don't handle value argument properly
- FormsyText cannot accept value 0
- Not compatible HOT 1
- not compatible with React 16.3.1 HOT 1
- Accept a list of validation errors?
- Is This Project Maintained? HOT 15
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from formsy-material-ui.