Clicking on "input group", but not in an input, does nothing.

[baleeds]

It seems to me that the UX would greatly improved if there were some reaction when clicking in the styled 'input' area, marked by the class "react-date-picker__button__input". This is very evident when inputs are taking the whole width:

My expectation is that clicking in that area would focus the first text input.

[nkurapati]

Small work around

.react-date-picker__inputGroup__year { flex-grow: 1; } }

[wojtekmaj]

Yeah that seems like a neat idea. It's what native input does by default when expanded beyond what's necessary, and React-Date-Picker's aim is to behave as closely to a native input as possible. This will be out with the next release of React-Date-Picker, React-DateTime-Picker, React-Time-Picker and their range versions, too.

[baleeds]

Looking forward to it! Thanks for all your work!

[htmlboy]

Hi, I'm adding this note for future reference, since I found a workaround for this issue.

You can create a state for isOpen and change it by clicking on the DatePicker component. The isOpenprop only affects the component when the value change, so it doesn't override other behaviours, like clicking out. BUT for the same reason, you should update the state when the calendar is closed, or it will only work once.

Here's my code.

Before render():

constructor() {
    super();
    this.state = {
      isOpen: false,
    };
    this.openCal = this.openCal.bind(this);
    this.closeCal = this.closeCal.bind(this);
  }

  openCal() {
    this.setState({ isOpen: true });
  }

  closeCal() {
    this.setState({ isOpen: false });
  }

On the DatePicker component:

<DatePicker
          onCalendarClose={this.closeCal}
          onClick={this.openCal}
          isOpen={this.state.isOpen}
          …
/>

(Potential workaround for #120 #67 and related to #59)