Material-ui: Switches not responding to clicks

[jschlieber]

Problem Description

I'm using material-ui in a Meteor 1.3.1 application via npm. So far, all components I've used (Dialoges, Tabs, Icons, GridLists, Selects, TextFields, Popovers, Menus, Lists, Snackbars, Buttons, LeftNav) work like a charm. But a simple plain Checkbox does not respond to any clicks. It doesn't matter whether controlled or uncontrolled. It doesn't matter where i put it. It simply does not respond to any user interaction. The onCheck function never gets called. I can control the Checkbox with a button thought. For example, here I can check and uncheck the Checkbox by clicking on the FlatButton, but none of the other components (including the CheckBox itself) respond to clicks:

import React, {Component, PropTypes} from 'react';
import Checkbox from 'material-ui/lib/checkbox';
import Toggle from 'material-ui/lib/toggle';
import RadioButton from 'material-ui/lib/radio-button';
import RadioButtonGroup from 'material-ui/lib/radio-button-group';
import FlatButton from 'material-ui/lib/flat-button';

class Example extends Component {

    constructor(props) {

        super(props);

        this.state = {
            check: false
        };

        this._toggleCheck = (evt, isInputChecked) => {
            evt.preventDefault();
            this.setState({
                check: !this.state.check
            });
        };
    }

    render() {
        return (
            <div style={{maxWidth: 250}}>
                <FlatButton
                    label="Check"
                    onTouchTap={this._toggleCheck}
                />
                <Checkbox
                    checked={this.state.check}
                    onCheck={this._toggleCheck}
                    label="Checkbox"
                    style={{marginBottom: 16}}
                />
                <Toggle
                    label="Toggle"
                    style={{marginBottom: 16}}
                />
                <RadioButtonGroup name="shipSpeed" defaultSelected="not_light">
                    <RadioButton
                        value="light"
                        label="Simple"
                        style={{marginBottom: 16}}
                    />
                    <RadioButton
                        value="not_light"
                        label="Selected by default"
                        style={{marginBottom: 16}}
                    />
                </RadioButtonGroup>
            </div>
        );
    }
}

I'm lost here. Am I missing something? Any help would be much appreciated. Thanks!

Versions

• Material-UI: 0.15.0-alpha.2
• React: 0.14.8
• Browser: Tested on Chrome and Firefox

[sanderdatema]

I am also using the Checkbox in a Meteor 1.3.1 app and by coincidence stumbled upon the same problem. Turns out that when you use checked the whole checkbox freezes. But, if you use defaultChecked, it works. Why? I have no idea. :)

<Checkbox
  label="Complete?"
  defaultChecked={item.complete}
  ref="complete"
  onCheck={(e, checked) => this.markComplete(checked)}
/>

In my case I wasn't using states btw. So item is coming from a Meteor collection and complete is either true or false. The markComplete function is this:

markComplete() {
  const complete = this.refs.complete.isChecked();
  const itemId = this.props.item._id;

  Meteor.call('items.markComplete', complete, itemId);
}

[jschlieber]

I also tried defaultChecked without success...

[sanderdatema]

Even if you use the code I provided?

[jschlieber]

Sorry. It doesn't work.

[srimenow]

I am currently having a similar issue. Attempting to use the RadioButtonGroup, ran down the rabbit hole for a while only, only to finally abandon using this item, (maybe even adding react and material ui to that list).

I really think this is related to where this is placed:
'''
import injectTapEventPlugin from 'react-tap-event-plugin';

// Needed for onTouchTap
// Can go away when react 1.0 release
// Check this repo:
// https://github.com/zilverline/react-tap-event-plugin
injectTapEventPlugin();
'''

I tried to move it around as well, but based on prior experience with getting simple dropdown's and sidebar toggle working, I think it might be possible the click in this instance is not being triggered.

Best of luck, I'll let you know if anything changes on my end :)

[mikroware]

@jschlieber @srimenow

I just had the same problem and after some deeper investigation I found the switch elements being highly reliable on an invisible <input type="checkbox" ... /> element. This element seems to be invisible spread over the label and switch visualization. When comparing my rendered DOM with that from the demo site I found my input checkbox element was not visible while the one on the demo site was visible.

Some of my css that I received from a designer contained something like:

input[type="checkbox"] {
    display: none;
}

No idea why the designer put that there, probably to hide it in certain restyled use-cases. After removing that part, all material-ui switches started working perfectly!

[puranjayjain]

This is probably related to https://github.com/callemall/material-ui/issues/2983.
Follow the solution over there it will work for now.

[mikroware]

I don't see how it is directly related to that issue. From the explanation in my reply here and on the other issue, it can be deduced that these are most likely two separate issues. Also in this issue the checkbox does not even respond at all, while in the other issue it responds but gets a reset.

[Evilcat325]

this is actually a easy issue.
check this react documentation
Potential Issues With Checkboxes and Radio Buttons

If you ever use event.perventDefault(), you need to setTimeout the setState
for your case

this._toggleCheck = (evt, isInputChecked) => {
            evt.preventDefault();
            setTimeout( () => this.setState({
                check: !this.state.check
            }));
        };

[mpontikes]

Can this be closed by @Evilcat325 's solution? @jschlieber

[jschlieber]

No, because (as I stated in the problem description) in my case the _toggleCheck function doesn't get called.

[jschlieber]

The problem persists, but I figured it's probably a conflict with the MaterializeCSS library, which is also used in this particular project. Unfortunately I didn't have the time to check and to create a repro. I won't have time before september as I am working on a different project right now.

Thanks for your help.