onChange event not firing when typing

The onChange event only seems to fire when selecting a date from the picker but not when the user types into the input field. This makes it impossible to do any sort of validation on user input.

Current workaround is to set readOnly to true so that it forces users to only use the picker, but it would be ideal to also let them type into the box and be able to run my own validation regex in a change handler before updating the input value. Am I missing something here or is this not supported? It seems like you would either need to expose the input field’s actual onChange property or tie it into the parent component’s property (I would have assumed it already was).

React-datepicker v0.25.0 React v0.14.7

[alex-shamshurin]

I noticed that onChange event never happens if using custom input component with null value. When we select date through DatePicker the input field first get onBlur event and then if it’s value is null and onBlur handler of input element is defined then onChange of DatePicker is not fired.

[YuriAntishev]

I met the same issues in my practice so I resolve problem with this approach - just pass all props(value, onClick, onChange) in the custom input(child) component:

const [startDate, setStartDate] = useState(new Date());
        const ExampleCustomInput = ({ value, onClick, onChange }: any) => (
            <S.StyledFloatingLabel controlId="floatingInput" label={placeholder} className="mb-3"
            >
                <Form.Control
                    placeholder={placeholder}
                    onChange={onChange}
                    onClick={onClick}
                    value={value}
                    autoComplete="off"
                />
            </S.StyledFloatingLabel>
        );
return (
                <>
                    <DatePicker
                        className="form-control"
                        dateFormat="dd/MM/yyyy"
                        selected={startDate}
                        onChange={(date: any) => setStartDate(date)}
                        customInput={<ExampleCustomInput />}
                    />
                </>
            );