react-bootstrap: ToggleButtonGroup onChange does not work in version 0.31.1

This is the same issue as #2727… I’m not sure why that was closed so quickly.

On Chrome Version 59.0.3071.115, the onChange handler of a ToggleButtonGroup just isn’t being called.

Here’s my example:

import React, {Component} from 'react';
import ToggleButtonGroup from 'react-bootstrap/lib/ToggleButtonGroup';
import ToggleButton from 'react-bootstrap/lib/ToggleButton';
// import './AppointmentModal.css';

class AppointmentModalDemo extends Component {
  constructor(props) {
    super(props);
    this.isAppMade = this.isAppMade.bind(this);
  }

  isAppMade(vals) {
    console.log(vals);
  }

  render() {
    return (
      <div className="appointment-modal">
        <ToggleButtonGroup
          type="radio"
          name="appointmentMade"
          onChange={this.isAppMade}>
          <ToggleButton value={1}>Yes</ToggleButton>
          <ToggleButton value={2}>No</ToggleButton>
        </ToggleButtonGroup>
      </div>
    );
  }
}
export default AppointmentModalDemo;

I would expect something to be dumped on the console each time I press a button, but I’m getting nothing.

About this issue

  • Original URL
  • State: closed
  • Created 7 years ago
  • Comments: 29 (6 by maintainers)

Most upvoted comments

Found the issue, the problem occurs when bootstrap js file included.

https://codepen.io/kamote/pen/gGvadB

Still have the issue with React 15.5.4. Anyone else?

I am not including bootstrap-loader in my webpack, and this bug is still there.

Same problem here with 0.31.2 had to use a workaround.

Didn’t debug it, however on webpackbin with same versions of the packages, onChange does work. Inside our app, however, it doesn’t.

I used a workaround by passing an onClick handler to the individual ToggleButton’s instead.

So what is the work around? Can I disable the js file just for my react components?

Echoing @corellian comment - we’re not including bootstrap-loader either and are still experiencing this issue.