React-datepicker: Inline Portal won't close on 'escape'

[evangow]

Great library! This has been extremely helpful to me! 🙂

Expected behavior

On the Inline Portal version (needed in order to provide a custom input with portal)

• hit 'escape' => portal should close
• hit arrow keys => date selected should change

Actual behavior

• hit 'escape' => nothing happens
• hit arrow keys => nothing happens

Steps to reproduce

You can see this under the Inline Portal version in the example from the documentation
https://reactdatepicker.com/

I tried to handle the key presses myself, but if you add the onKeyDown prop with a function when you set the inline prop, the function passed to onKeyDown will not be called.

[ryanleland]

Direct link https://reactdatepicker.com/#example-30

[mtford90]

Also - can't click the backdrop to escape with inline/portal either.

[evangow]

@mtford90 it's not documented, but you can add an onClickOutside property to the DatePicker component and pass it a toggle function. Basically, do something like the below.

class MyDatePicker extends Component {
  state = { isOpen: false };
  toggleCalendar = () => this.setState({ isOpen: !this.state.isOpen });
  render() {
    <input onClick={this.toggleCalendar} />
    {this.state.isOpen && (
      <DatePicker
        inline
        withPortal
        onClickOutside={this.toggleCalendar}
      />
    )}
  }
}

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.