Javascript airbnb react-dates showClearDate throwing

Question

I am trying to get the clear date button appearing on the SingleDatePicker. Looking at the documentation all I have to do is add the showClearDate attribute to the SingleDatePicker. This is how I've implemented it:

<SingleDatePicker 
    date={null}
    isOutsideRange={ (date) => {return false} }
    id={detail.name}
    showClearDate={true}
    focused={focused}
    numberOfMonths={ 1 }
    onDateChange={ (date) => { handleDateChange( momentToISO(date) )}}
    onFocusChange={({ focused }) =>{ 
      handleFocusChange(focused) 
      }
    }
  />

Evertying works fine if I remove the showClearDate attribute (without showing the button of course) but when I add this attribute in I get an exception "cannot read property onClearDateMouseEnter of undefined"

The following is taken from the react-dates SingleDatePickerInput.jsx showing where the error is occurring.

 {showClearDate && (
    <button
      {...css(
        styles.SingleDatePickerInput_clearDate,
        small && styles.SingleDatePickerInput_clearDate__small,
        !customCloseIcon && styles.SingleDatePickerInput_clearDate__default,
        !displayValue && styles.SingleDatePickerInput_clearDate__hide,
      )}
      type="button"
      aria-label={phrases.clearDate}
      disabled={disabled}
      onMouseEnter={this.onClearDateMouseEnter} // here
      onMouseLeave={this.onClearDateMouseLeave} // i imagine here too
      onClick={onClearDate}
    >
      {closeIcon}
    </button>
  )}

There is no reference in the documentation to having to supply the function onClearDateMouseEnter function or any other reference to it in code.

What am I missing here?

Answer 1

I have a similar issue. I get the same error "SingleDatePickerInput.js:236 Uncaught TypeError: Cannot read property 'onClearDateMouseEnter' of undefined".

It looks like they fixed it in 17.1.1. Let's see if this helps, I'll test it soon.