Can't use onChange with react-bootstrap ToggleButtonGroup

Question

So it's been a couple of hours since I spotted this problem and it's getting weirder every minute. The main issue is I can't manage to make the onChange event work on a ToggleButtonGroup.

My code:

class ToggleButtonGroupControlled extends React.Component {                                                                                                                                  
    constructor(props, context) {                                                                                                                                     
        super(props, context);                                                                                                                                        

        this.state = {                                                                                                                                                
            value: [1, 3],                                                                                                                                            
        };

        this.onChange = this.onChange.bind(this);                                                                                                                                    
    }                                                                                                                                                                 

    onChange(value){                                                                                                                                                  
        alert(value);                                                                                                                                                 
        this.setState({ value });                                                                                                                                     
    };                                                                                                                                                                

    render() {                                                                                                                                                        
        return (                                                                                                                                                      
            <ToggleButtonGroup                                                                                                                                        
              type="checkbox"                                                                                                                                         
              value={this.state.value}                                                                                                                                
              onChange={this.onChange}                                                                                                                                
              >                                                                                                                                                       
              <ToggleButton value={1}>Checkbox 1 (pre-checked)</ToggleButton>                                                                                         
              <ToggleButton value={2}>Checkbox 2</ToggleButton>                                                                                                       
              <ToggleButton value={3}>Checkbox 3 (pre-checked)</ToggleButton>                                                                                         
            </ToggleButtonGroup>                                                                                                                                      
        );                                                                                                                                                            
    }                                                                                                                                                                 
}

Now, when I select different "checkboxes" the display changes accordingly, but the alert is never fired. Furthermore, inspecting the component through the Chrome React extension shows the state doesn't change, so it's left as an uncontrolled component because the onChange handler is never executed.

The weird part, however, is that this same code is used in the docs demo and it just works. Another strange thing is that in the demo, I can modify the onChange handler via $r.props.onChange with React Developer Tools, while in my test I just can't. ToggleButtonGroup makes use of uncontrollable to return an uncontrolled version of the component wrapping the good one. The uncontrolled wrapper has the onChange I pass via props, but the controlled component has a certain setAndNotify function from uncontrollable attached and it can't be removed.

I really don't know what could be the problem since I think I have discarded all the sensible possibilities, but I might be missing something obvious -- I really hope I am.

Thanks in advance for your time.

Answer 1

Other people encounter this issue as well (Refer to this). Downgrade react-boostrap package version should work