React-datepicker: customInput property is not working anymore

Created on 18 Sep 2020  路  3Comments  路  Source: Hacker0x01/react-datepicker

Describe the bugc
customInput property is not working anymore and is resulting into the following error: undefined is not an object (evaluating 'c.props.className)

To Reproduce
react-datepicker: v3.1.3
Here is a simple snippet that can be used to reproduce with Typescript (4.0.2)

            <ReactDatePicker
                selected={ new Date() }
                onChange={date => this.onChangeDate(date)}
                customInput={ ({ value, onClick }) => ( <input value={ value } onClick={ onClick } /> ) }
            />

Expected behavior
The custom input field working as defined in the customInput property.

Screenshots
image

Desktop (please complete the following information):

  • OS: macOS 10.15.6
  • Browse: Safari, Google Chrome
  • Version: 14.0, 85.0.4183.102

Most helpful comment

Got it to work with some workarounds for now, thought i'd just share them.

First it requires an instantiated component.

const CustomComp = ({ value, onClick }) => ( <input value={ value } onClick={ onClick } /> );
<ReactDatePicker
                selected={ new Date() }
                onChange={date => this.onChangeDate(date)}
                customInput={<CustomComp  />}
            />

This gave me some ref errors in the console so wrapped mine in a forwardRef as well.

const CustomComp = forwardRef(({ value, onClick }, ref) => ( <input ref={ref} value={ value } onClick={ onClick } /> ));
<ReactDatePicker
                selected={ new Date() }
                onChange={date => this.onChangeDate(date)}
                customInput={<CustomComp  />}
            />

I got another component so just threw together this from your code so its probably not compiling but you get the idea.

I think the customInput requires a overhaul so its more robust as well.

All 3 comments

Same error here

Got it to work with some workarounds for now, thought i'd just share them.

First it requires an instantiated component.

const CustomComp = ({ value, onClick }) => ( <input value={ value } onClick={ onClick } /> );
<ReactDatePicker
                selected={ new Date() }
                onChange={date => this.onChangeDate(date)}
                customInput={<CustomComp  />}
            />

This gave me some ref errors in the console so wrapped mine in a forwardRef as well.

const CustomComp = forwardRef(({ value, onClick }, ref) => ( <input ref={ref} value={ value } onClick={ onClick } /> ));
<ReactDatePicker
                selected={ new Date() }
                onChange={date => this.onChangeDate(date)}
                customInput={<CustomComp  />}
            />

I got another component so just threw together this from your code so its probably not compiling but you get the idea.

I think the customInput requires a overhaul so its more robust as well.

Is the error perhaps originating from this https://github.com/Hacker0x01/react-datepicker/blob/master/src/index.jsx#L924? As that assumes that if no customInputRef is given it will default that the prop is ref?

Was this page helpful?
0 / 5 - 0 ratings