Switches not responding to clicks

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

[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.

[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
            }));
        };