Why no reliable callback of opening the date selector?

[peshoicov]

I need to fire something each time someone clicks on the input. So I tried with:

onClick={console.log('CLICK')}
onShow={console.log('SHOW')}
onFocus={console.log('FOCUS')}

They all fire when the page loads and never when I click on the input. The date selector with the two months shown, but nothing gets fired.

This is the current implementation:

          <div className={styles.fieldText}>Date Range</div>
          <div className="InputFromTo">
            <DayPickerInput
              ref={...}
              value={from}
              format="MM DD, YYYY"
              placeholder="From"
              formatDate={formatDate}
              parseDate={parseDate}
              onClick={console.log('CLICK')}
              onShow={console.log('SHOW')}
              onFocus={console.log('FOCUS')}
              dayPickerProps={{
                selectedDays: [from, {from, to}],
                disabledDays: {before: todayDate, after: to},
                toMonth: to,
                modifiers,
                numberOfMonths: 2,
                onDayClick: () => {...}
              }}
              onDayChange={this.handleFromChange}/>
            <span className="InputFromTo-to">
              <DayPickerInput
                ref={...}
                value={to}
                format="MM DD, YYYY"
                placeholder="To"
                formatDate={formatDate}
                parseDate={parseDate}
                dayPickerProps={{
                  selectedDays: [from, { from, to }],
                  disabledDays: { before: getDisabledDateTo(todayDate,from) },
                  modifiers,
                  month: from,
                  fromMonth: from,
                  numberOfMonths: 2
                }}
                onDayChange={this.handleToChange}/>
            </span>
        </div>

Am I doing something wrong, or this component really doesn't have such callback :(

PS: Those callbacks fire whenever I choose some date, but I don't want this.
I want a callback of the datepicker opening.

[peshoicov]

Finally I ended with remembering the dates and whenever the user changes dates - I'm comparing with the old ones and if there is change - I'm doing the necessary stuff. In other words - now I do things when the dates has changed and not when the calendar opens. Not perfect, but works fine :)

[helloanoop]

@peshoicov They are firing when the page loads since you are executing them.
It should be
onClick={() => console.log('CLICK')}
instead of
onClick={console.log('CLICK')}

[helloanoop]

If someone is facing the same issue, you can achieve it by doing this.

<DayPickerInput
  inputProps={{ onFocus: () => console.log('FOCUS')}}
/>

@gpbl , @peshoicov You may close this issue.