React-datepicker: Keyboard navigation does not work with customInput

[paustint]

Expected behavior

1. Calendar with custom input works with keyboard

Actual behavior

1. Using a custom input, keyboard navigation does not work

Steps to reproduce

1. usign example page, go to the Custom Input section
2. click on the button to open the calendar
3. press keyboard arrow keys and notice that the browser window scrolls

Code used in example

class ExampleCustomInput extends React.Component {

  render () {
    return (
      <button
        className="example-custom-input"
        onClick={this.props.onClick}>
        {this.props.value}
      </button>
    )
  }
}

ExampleCustomInput.propTypes = {
  onClick: PropTypes.func,
  value: PropTypes.string
};

...

<DatePicker
  customInput={<ExampleCustomInput />}
  selected={this.state.startDate}
  onChange={this.handleChange} />

[ziweiwu]

this is indeed an issue.

[VinceSJ]

Seeing the same thing.

[sascha-friederich]

I found a way... the customInput element should has to use the onKeyDown-event (that gets passed to the custom input element by the DatePicker)

class ExampleCustomInput extends React.Component {

  render () {
    return (
      <button
       onKeyDown={this.props.onKeyDown}
        className="example-custom-input"
        onClick={this.props.onClick}>
        {this.props.value}
      </button>
    )
  }
}

i found this, analyzing the code... i think this should be mentioned in the documentation!

[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.