react-bootstrap: Document that ToggleButtonGroup doesn't work when Bootstrap JS is present

This is my code:

<ToggleButtonGroup
    name="eventType"
    type="radio"
    value={this.state.eventType}
    onChange={(eventType) => this.setState({eventType})}>
    <ToggleButton bsStyle="default-washed"
                  value="business">
        Business
    </ToggleButton>
    <ToggleButton bsStyle="default-washed"
                  value="leisure">Leisure
    </ToggleButton>
</ToggleButtonGroup>

The state is not being changed. However the selected value in the component itself changes as the active button changes. I’ve tested other places as well. This happens after I’ve updated from 0.31.0 to 0.31.2

About this issue

Original URL
State: closed
Created 7 years ago
Reactions: 3
Comments: 22 (9 by maintainers)

Commits related to this issue

Include Bootstrap JS warning in docs for ToggleButtonGroup #2774 — committed to tomscott1/react-bootstrap by tomscott1 6 years ago

Most upvoted comments

In case anyone else stumbles over here, I just wanted to say that I was able to get this to work, though my solution is a bit hacky. I found in the Bootstrap source that the toggle button code event handling is set up like this:

$(document).on('click.bs.button.data-api', '[data-toggle^="button"]', function (e) {
  // handle the click
})

I was able to disable this in my React app with the following:

componentDidMount() {
  $(document).off('click.bs.button.data-api', '[data-toggle^="button"]')
}

React Bootstrap is now working for me for toggling button groups. This is not a great solution since it would break any other Bootstrap JS toggle buttons on the page, but I’m sure it could be expanded on easily enough for a more generic solution.

Ideally, we could look up the event handler with jQuery and modify the selector so it doesn’t interact with React Bootstrap buttons. I could put something together for a PR if this is something this library would be interested in.

stevehanson on May 8, 2018

There’s also a workaround of setting an onClick handler on each individual ToggleButton. This worked for me (I’m working on an app where removing the bootstrap JS is not an option). This would be good to document as well.

mreishus on Dec 15, 2017

@alexschilpp It seems the issue occurs when bootstrap js lib included https://codepen.io/kamote/pen/gGvadB

kamote on Oct 6, 2017