React-datepicker: Can't close popup programmatically

[smeletis]

Describe the bug
User can't close popup programmatically

To Reproduce

1. Click on any picker (a popup will show)
2. Assuming there is a cancel button, what code should that button run?

onBlur is called when the user clicks outside, but my goal is to close it programmatically. Thanks in advance!

[kzotoff]

First way: use refs (remember that refs are not available before picker is rendered first!)

datepickerRef = React.createRef();

onCloseButton = () => {
  this.datepickerRef.current.setOpen(false);
}

render() {
    return <DatePicker ref={this.datepickerRef} />;
}

Second way: use open prop:

render() {
    return <DatePicker open={this.state.shouldShowDatepicker} />;
}

[smeletis]

Thanks @kzotoff it is working as expected! I used the ref way since IMO it's a better approach to my problem.

[ningo-agilityio]

@kzotoff:
Hi,
The open/close programmatically worked for me. But after closing by setOpen, the selected value was reset too.
How to prevent this unexpected reset action?

[kzotoff]

@ningo-agilityio:
Have no idea ) If you need to remember that value I think that's a good idea to store it by yourself and restore when opening datepicker, and don't rely on component which is technically a blackbox.

[ningo-agilityio]

@kzotoff: Ok, let me check around. Thanks for your answer ^^