Skip to content

YearPicker: Invalid value stays in input until unfocused again #5514

@Donorlin

Description

@Donorlin

Describe the bug

year picker (showYearPicker) displays invalid value when value is manually changed into invalid value.

To Reproduce
Steps to reproduce the behavior:

Following code only allows to select years between [2008 .. 2014]

  1. copy paste following code into any live editor on https://reactdatepicker.com
() => {
const [val, setVal] = useState(new Date("2014/02/08"));
  const [startDate, setStartDate] = useState(new Date("2008/02/08"));
  const [endDate, setEndDate] = useState(new Date("2014/04/08"));
  return (
    <DatePicker
      selected={val}
      onChange={(date) => setVal(date)}
      showYearPicker
      dateFormat="yyyy"
      minDate={startDate}
      maxDate={endDate}
    />
  );
};
  1. select (via dropdown menu) any valid date (DO NOT ONFOCUS FROM INPUT)
  2. with keyboard, delete last digit and fill in any non valid year digit
  3. unfocus (click away from input)
  4. invalid value stays in input
  5. if you click and unfocus the input, valid value (last valid picked value) is displayed in input

Expected behavior
Valid value displayed in input

Screenshots

Here is quick video of reproduced issue

Screen.Recording.2025-03-24.at.08.54.15.mov

Additional context
Tried it locally on v8 and latest v8.2.1 version of react-datepicker
Also on your documentation website (attached video)

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions