React Material-UI checkbox onChange event does not fire

material-ui checkbox oncheck example
react checkbox onchange
checkbox onchange not working
react custom checkbox
react formcontrol checkbox
material-ui uncontrolled checkbox
material-ui treeview checkbox
material-ui checkbox helper text

Trying to use Material UI checkbox. Pretty simple one might think? Well the checkbox doesn't toggle. Turns out the onChange event is not fired even internally to the component (I put logs in the node_modules package).

      <Checkbox
        checked={this.state.isTrue}
        onChange={e => {
          console.log(e.target.checked);
          this.setState({isTrue: e.target.checked});
        }} />

Pretty simple, right? But the console.log never fires. I can hack around it by putting an onClick event handler on the component and toggling the state manually, but that is silly. Anyone have a clue?

The API is at https://material-ui.com/api/checkbox/#checkbox. Not rocket science.

The issue might come from the structure of your component as provided code is perfectly fine, here is a working exemple you can try on codesandbox.io.

Compare with your code and try to find differences, but isolating a specific element might be a good way to realise the issue might come from somewhere else.

import React, { Component } from "react";
import { render } from "react-dom";
import Checkbox from "material-ui/Checkbox";

class App extends Component {
  constructor() {
    super();
    this.state = {
      isTrue: false
    };
  }
  render() {
    return (
      <div>
        <Checkbox
          checked={this.state.isTrue}
          onChange={e => {
            console.log(e.target.checked);
            this.setState({ isTrue: e.target.checked });
          }}
        />
      </div>
    );
  }
}

render(<App />, document.getElementById("root"));

onChange event of a checkbox not firing in some circumstances , I'm not sure if that's a but or (more likely) just a lack of knowledge. input change not triggering on React > 15.6.1 Tradeshift/tradeshift-ui#435. Back to the specific case, the checkbox is supposed to fire an event when clicked. And this is what happens, as long as the initial state of value (that is, this.props.settings.data[this.setting_key]) is false. In this case, every time I click the checkbox, this.onChange is called.

Your code looks fine, maybe something else is wrong somewhere. However, for a quick POC, you can refer to this link. This is the same forked from material UI official docs demo so you could relate easily.

Additionally, you can compare the code with given below

import React from 'react';
import Checkbox from '@material-ui/core/Checkbox';

export default function Checkboxes() {
  const [isTrue, setIsTrue] = React.useState(false);


  return (
    <div>
      <Checkbox
        checked={isTrue}
        onChange={e=> {
          console.log("target checked? - ", e.target.checked);
          setIsTrue(e.target.checked)
        }}
        value="checkedA"
        inputProps={{
          'aria-label': 'primary checkbox',
        }}
      />
    </div>
  );
}

Here are screenshots for verification

References: https://material-ui.com/components/checkboxes/

Checkbox: "onCheck" does not work with React 15.6 · Issue #7261 , RadioButtonGroup onChange does not seem to work on React 15.6 #7292 onCheck={(event, value) => handleCheck(value)} /> I have this issue again with material-ui 0.20.0 and react 16.2 (mac/chrome) When I use checked and onCheck together for a <Checkbox/> then onCheck simply doesn't fire. onChange event not fired for checkboxes I don't think react-bootstrap does anything on the onChange stacked checkboxes that wouldn't fire onChange event. But

In many cases, Material UI Checkbox onChange event is not working.

I suggest to save your time and use onClick event instead.

It will work always. Checkbox usually have a boolean value.

 <Checkbox
    checked={this.state.isTrue}
    onClick={() => this.setState({isTrue: !this.state.isTrue})}
 />

Checkbox API, The API documentation of the Checkbox React component. This does not set the native input element to indeterminate due to inconsistent behavior across browsers. onChange, func, Callback fired when the state is changed. You can pull out the new checked state by accessing event.target.checked (boolean). function(event: object) => void event: The event source of the callback. You can pull out the new checked state by accessing event.target.checked (boolean). required: bool: If true, the input element will be required. size 'medium' | 'small' 'medium' The size of the checkbox. small is equivalent to the dense checkbox styling. value: any: The

Switch API, The API documentation of the Switch React component. onChange, func, Callback fired when the state is changed. Signature: function(event: object) => void @jquense this is the correct issue - new in React 15.6 (not in 15.5 and below), onChange will no longer fire for clicks/activations on already-selected radio buttons. Someone relying on that to log activations (including keyboard activations) on already-selected radio buttons would have their code broken in v15.6, if I'm understanding correctly?

InputBase API, The API documentation of the InputBase React component. Use when the component is not controlled. onChange, func, Callback fired when the value is changed. Signature: function(event: object) => void Card Content · Card Header · Card Media · Checkbox · Chip · Circular Progress · Click Away Listener · Collapse  When you click a toggleable checkbox the input object does not fire a change event. To demonstrate this I created a jsfiddle. Check your console for messages. In my opinion a change event should be fired to have the opportunity to handle

checkbox - material-ui · Bit, Pass a ref to the input element. onChange. function. The event source of the callback. You can pull out the new checked state by accessing  Another complicating--confusing may be a better word--factor is that (when a filed is of type=checkbox) this does not work the other way around (i.e. value is controlled by checked), in that you cannot set the initial value of the checkbox field to "false" (using initialValues) and expect that checked will become false as a result.

Comments
  • Not sure about your code but check out codesandbox.io/s/tender-saha-0ytjr and as a trick, as possible as you can prefer use function/hooks instead class components :)
  • The code looks fine, you can check more here codesandbox.io/s/material-demo-ock3u?fontsize=14
  • Yeah. So as it happens I am operating in an environment where there is a stylesheet over which I have no control, which tends to get its filthy fingers into everything. Once I removed all its nastiness, the checkbox works again.