React-bootstrap-daterangepicker with input behaves weirdly

Question

I'm trying to use react-bootstrap-datepicker with inputs inside of it, and I ran into an unpleasant bug: each time I click on one of the inputs or press any key, calendar is toggled (shown if it was hidden and vice versa). I reproduced it on codesandbox: https://codesandbox.io/s/4zx1l0n6p4 You can also see the versions of the dependencies I'm using there. I'm not sure if the problem is in the package or in my code, so I'd appreciate any help!

Answer 1

Update: I managed to get it to work by installing version 3.4.0 and replacing two inputs with single input: https://codesandbox.io/s/kwy30z9rl3. The bug I described is probably caused by the addition of the wrapper div in one of the later versions. In the latest version react-bootstrap-daterangepicker wraps any children you pass to it into a container:

render() {
const { children, containerStyles, containerClass } = this.props;
return (
  <div
    ref={picker => {
      this.$picker = $(picker);
    }}
    className={containerClass}
    style={containerStyles}
  >
    {children}
  </div>
);

}

And bootstrap-daterangepicker checks if the parent of the datepicker is an input/button and apllies the necessary event handlers:

if (this.element.is('input') || this.element.is('button')) {
this.element.on({
    'click.daterangepicker': $.proxy(this.show, this),
    'focus.daterangepicker': $.proxy(this.show, this),
    'keyup.daterangepicker': $.proxy(this.elementChanged, this),
    'keydown.daterangepicker': $.proxy(this.keydown, this) //IE 11 compatibility
});
} else {
    this.element.on('click.daterangepicker', $.proxy(this.toggle, this));
    this.element.on('keydown.daterangepicker', $.proxy(this.toggle, this));
}

And since the element in question is a plain div, every click or keypress on the input triggers toggle.