ToggleButtonGroup onChange does not work in version 0.31.1

[dancrumb]

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.

[dancrumb]

FWIW:

const isAppMade = (vals) => console.log(vals);
const buttonGroupInstance = (
<div className="appointment-modal">
        <ToggleButtonGroup
          type="radio"
          name="appointmentMade"
          onChange={isAppMade}>
          <ToggleButton value={1}>Yes</ToggleButton>
          <ToggleButton value={2}>No</ToggleButton>
        </ToggleButtonGroup>
      </div>
);

ReactDOM.render(buttonGroupInstance, mountNode);

works totally fine on https://react-bootstrap.github.io/components.html

[taion]

Right. And in fact your specific example works just fine as well as:

class AppointmentModalDemo extends React.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>
    );
  }
}

ReactDOM.render(<AppointmentModalDemo />, mountNode);

There's nothing we can do here without a repro.

[dancrumb]

... am I missing some JavaScript on my site, then?

Do I need to be including something other than react-bootstrap?

[jquense]

No, it may be related to a bug with uncontrolled radios/checkbox in React 15.6 though, they tend to not fire change events correctly 😳

[dancrumb]

For the record, I'm on React 15.6.1; are you recommending rolling back to 15.5?

[jquense]

or controlling your radios. I'm just trying to say you may be running into a React bug not a react-bootstrap one

[dancrumb]

I went to 15.5.4 - no improvement. I'm working on publishing a demo of this bug

[dancrumb]

I'm sure it could be a React bug, but since I'm not doing anything particularly weird with react-bootstrap and I'm not the only one experiencing this issue, I'd love to get something a little more definitive.

[dancrumb]

Created a gist here: https://gist.github.com/dancrumb/292ae9ecc3b362a76edcb3414ff3b45a

Here's the demo: https://demo.ohanapediatrics.com/bug-demo.html

[taion]

Try throwing up a CodeSandbox/CodePen/JSFiddle/&c.

[dancrumb]

Problem solved.

I was including bootstrap-loader in my webpack build and that must have been interfering.

Tagging @ForwardLabs in case this is their problem too.

[corellian]

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

[ForwardLabs]

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

[ForwardLabs]

We're still debug this issue, but it appears that the onChange handler is being stripped out somehow.

[arian-swydo]

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.

[spyl94]

Same problem here with 0.31.2 had to use a workaround.

[swiharta]

Still have the issue with React 15.5.4. Anyone else?

[CharlesIrvineKC]

Yes, I have the problem with React 15.5.4. What is the best option - installing a onClick handler on the individual ToggleButtons?

[ashic]

Seeing the same with:

  "dependencies": {
    "bootstrap": "3.3.7",
    "jest": "^21.0.0-beta.1",
    "lodash": "^4.17.4",
    "moment": "^2.18.1",
    "react": "^15.6.1",
    "react-bootstrap": "^0.31.2",
    "react-datepicker": "^0.53.0",
    "react-dom": "^15.6.1",
    "react-redux": "^5.0.6",
    "react-router-dom": "^4.1.2",
    "react-scripts": "1.0.11",
    "react-throttle": "^0.3.0",
    "redux": "^3.7.2",
    "redux-thunk": "^2.2.0"
  }

Also the case with 4.0 beta of bootstrap.

[alexschilpp]

Having the same problem

"dependencies": {
    "moment": "^2.18.1",
    "rc-slider": "^8.3.1",
    "react": "^15.6.1",
    "react-bootstrap": "^0.31.3",
    "react-clipboard.js": "^1.1.2",
    "react-dom": "^15.6.1",
    "react-google-maps": "^7.3.0",
    "react-select-plus": "^1.0.0-rc.5",
    "react-tabs": "^1.1.0"
}

Has anyone found a workaround to trigger onChange()?

[jquense]

If anyone can post a functional reproduction in codesandbox or similar we would be happy to help y'all but there is not we can do with out one

[alexschilpp]

Good news for react & react-bootstrap, bad news for the rest of us:

I reproduced the use case with CodePen and everything seems to be working fine https://codepen.io/alexschilpp/pen/PJwdxX.

So far I'm quite clueless. Looks like another library is interfering and causing the trouble.

[kamote]

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

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

[swiharta]

@kamote That was it, thanks! Now to convert all Bootstrap JS elements on my site to use react-bootstrap...

[avremel]

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

[CharlesIrvineKC]

See arian-swydo commented on Aug 7 above. that worked fine for me.

[geminiyellow]

react-bootstrap: 0.31.5 + react: 15.6.1 not working.
i just copy the sample Controlled code from here,
and change type to radio add name.

[kamarajuPrathi]

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

https://codepen.io/kamote/pen/gGvadB
@kamote do we have a fix for it , i mean having inline and making this work ?

[taion]

Don't include the Bootstrap JS. React-Bootstrap already takes care of wiring things up.

[manikanta-sandeep]

Right. And in fact your specific example works just fine as well as:

class AppointmentModalDemo extends React.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>
    );
  }
}

ReactDOM.render(<AppointmentModalDemo />, mountNode);

There's nothing we can do here without a repro.

Need to put an ID for each input, then it is working fine