Material-ui: Toggle Component's onToggle function's event.target.value is always 'on' even when toggled to off

[harryttd]

Problem description

When using the onToggle function for a Toggle component, the event's target.value that is passed is always 'on'. Even when switching the toggle to off, when I log the event.target.value in the handleChange function it always logs 'on'.

Link to minimal working code that reproduces the issue

<Toggle onToggle={(event) => this.handleChange(event, 'encode')} style={styles.toggle} label="Encode" labelPosition="right" />

handleChange(event, state) { console.log(state, event.target.value); this.setState({ [state]: event.target.value }); }

Thank you!

Versions

• Material-UI: ^0.17.4
• React: ^15.5.4
• Browser: Chrome 57.0.2987.133

[StephanBijzitter]

I noticed the exact same today.

I could use the toggled property to update the toggle's state, but that would still leave this bug in place.

• Material-UI: 0.17.1
• React: 15.4.2
• Browser: Opera 44.0.2510.1218

Also tested with:

• Material-UI: 0.17.4
• React: 15.5.4
• Browser: Opera 44.0.2510.1218

[harryttd]

Yes.

My work around is handleToggle() { this.setState({ encode: !this.state.encode }); }
where initial state is a bool.

Not a big deal, but still...

[harryttd]

Hmm...

I just realized the issue is the same thing with checkboxes.

[qstyler]

Hi guys! Was anyone able to solve this problem?

[MaxInMoon]

So the issue resolution is to not relie on isInputChecked arg?

[stevematdavies]

This is a bigger problem than shown here, and is causing no end of issues for us. Even getting the value of the checkbox on componentDidUpdate the checked property and value NEVER changes even when the box itself is unchecked. It is always value=on checked.

This is such a bad issue, but it seems no workaround suggested solves the issue. To which extent, it looks as though we will have to build our own checkbox just to overcome this.

It seems this issue is ongoing and bot fixed, why is this?

[oliviertassinari]

We have been porting the component on the v1-beta branch. We reimplemented it from the ground-up. While we haven't tested it, I think that the issue is most likely fixed on that branch. Hence, I'm closing it.
Still, we will accept PR fixes until v1-beta takes over the master branch.

[misterpoloy]

I make my own fix setting the defaul state as false and then change it on the Toggle action:

this.state = {
      p_program_activation: false
    };

My action:
this.setState({ [e.target.name]: !this.state[e.target.name] });

[mdi]

This is still an issue with 1.0.0-beta.13.

[oliviertassinari]

@mdi Are you able to provide a reproduction example with the v1-beta version?

[mdi]

https://codesandbox.io/s/9yz7mn6w4y

[oliviertassinari]

@mdi Perfect, I'm looking at it!

[oliviertassinari]

@mdi You need to use event.target.checked https://codesandbox.io/s/jjq9977ww3

[roelbarreto]

I used onClick instead of onToggle
```javascript

````
Hope this helps

[giuliogallerini]

For anyone who is still having this problem, I found a work around by adding a wrapper around the <Toggle /> and binding to it the event.

<span onClick={this.toggleTheme}>
   <Toggle
      label={defaultTheme ? 'Night' : 'Day'}
      toggled={!defaultTheme}/>
</span>

Hope this helps!