Skip to content

Missing selected class on multi-select Year Picker #5322

@michaelsawyers

Description

@michaelsawyers

Describe the bug
When using selectsMultiple along with showYearPicker, when I select various years they are not getting the selected class and therefore not able to style as selected.

To Reproduce

const MultiYearPicker = () => {
  const [selectedDates, setSelectedDates] = useState([]);

  return (
    <DatePicker
      placeholder="Select years"
      dateFormat="yyyy"
      showYearPicker
      selectsMultiple
      selectedDates={selectedDates}
      onChange={setSelectedDates}
      shouldCloseOnSelect={false}
      disabledKeyboardNavigation
    />
  );
};
  1. When I select years, say 2019 and 2024
  2. These years are added to state and I see the dates in the input
  3. But those year divs do not get the react-datepicker__year-text--selected classes so they remain unstyled.
    (This may be issue with other show_Picker variations, but showYearPicker is what I've tested.

Expected behavior
I expect the selected class being applied.

Screenshots

Screen.Recording.2025-01-15.at.10.16.00.AM.mov

Desktop (please complete the following information):

  • OS: macOS
  • Browser: chrome
  • Version 131

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