diff --git a/src/month.tsx b/src/month.tsx index e8681d04d..f68e22ee6 100644 --- a/src/month.tsx +++ b/src/month.tsx @@ -413,7 +413,12 @@ export default class Month extends Component { ); isSelectedQuarter = (day: Date, q: number, selected: Date): boolean => - getQuarter(day) === q && getYear(day) === getYear(selected); + getQuarter(selected) === q && getYear(day) === getYear(selected); + + isSelectQuarterInList = (day: Date, q: number, selectedDates: Date[]) => + selectedDates.some((selectedDate) => + this.isSelectedQuarter(day, q, selectedDate), + ); isMonthSelected = () => { const { day, selected, selectedDates, selectsMultiple } = this.props; @@ -428,6 +433,19 @@ export default class Month extends Component { return !!selected && this.isSelectedMonth(day, monthIdx, selected); }; + isQuarterSelected = () => { + const { day, selected, selectedDates, selectsMultiple } = this.props; + const quarterIdx = getQuarter(day); + + if (selectsMultiple) { + return selectedDates?.some((selectedDate) => + this.isSelectedQuarter(day, quarterIdx, selectedDate), + ); + } + + return !!selected && this.isSelectedQuarter(day, quarterIdx, selected); + }; + renderWeeks = () => { const weeks = []; const isFixedHeight = this.props.fixedHeight; @@ -921,7 +939,6 @@ export default class Month extends Component { day, startDate, endDate, - selected, minDate, maxDate, excludeDates, @@ -941,18 +958,21 @@ export default class Month extends Component { disabled) && isQuarterDisabled(setQuarter(day, q), this.props); + const selection = this.getSelection(); + return clsx( "react-datepicker__quarter-text", `react-datepicker__quarter-${q}`, { "react-datepicker__quarter-text--disabled": isDisabled, - "react-datepicker__quarter-text--selected": selected - ? this.isSelectedQuarter(day, q, selected) + "react-datepicker__quarter-text--selected": selection + ? this.isSelectQuarterInList(day, q, selection) : undefined, "react-datepicker__quarter-text--keyboard-selected": !disabledKeyboardNavigation && preSelection && this.isSelectedQuarter(day, q, preSelection) && + !this.isQuarterSelected() && !isDisabled, "react-datepicker__quarter-text--in-selecting-range": this.isInSelectingRangeQuarter(q), diff --git a/src/test/month_test.test.tsx b/src/test/month_test.test.tsx index d793669f9..85fc52fa5 100644 --- a/src/test/month_test.test.tsx +++ b/src/test/month_test.test.tsx @@ -1202,6 +1202,56 @@ describe("Month", () => { }); it("should have no axe violations", () => runAxe(monthComponent)); + + it("should apply the selected class when the quarter is a part of selected date", () => { + const selectedDate = newDate("2025-11-01"); + const keyboardSelectedDate = selectedDate; + + const { container } = render( + , + ); + + const selected = container.querySelector( + ".react-datepicker__quarter-text--selected", + ); + expect(selected).not.toBeNull(); + expect(selected?.textContent).toBe("Q4"); + }); + + it("should apply the selected class when the quarter is a part of selected dates", () => { + const selectedDates = [newDate("2025-11-01"), newDate("2025-01-01")]; + const keyboardSelectedDate = selectedDates[0]; + const day = selectedDates[0] as Date; + + const { container } = render( + , + ); + + const selectedElements = Array.from( + container.querySelectorAll(".react-datepicker__quarter-text--selected"), + ); + expect(selectedElements.length).toBe(selectedDates.length); + + const expectedQuarterLabels = selectedDates.map( + (date) => `Q${getQuarter(date)}`, + ); + expect( + expectedQuarterLabels.every((label) => + selectedElements.some((element) => element?.textContent === label), + ), + ).toBe(true); + }); }); describe("if quarter is not selected", () => { @@ -2629,6 +2679,56 @@ describe("Month", () => { ), ).toBeNull(); }); + + it("should not apply the keyboard-selected class when the quarter is a part of selected date", () => { + const selectedDate = newDate("2025-11-01"); + const keyboardSelectedDate = selectedDate; + + const { container } = render( + , + ); + + const selected = container.querySelector( + ".react-datepicker__quarter-text--selected", + ); + const keyboardSelected = container.querySelector( + ".react-datepicker__quarter-text--keyboard-selected", + ); + + expect(selected).not.toBeNull(); + expect(keyboardSelected).toBeNull(); + }); + + it("should not apply the keyboard-selected class when the quarter is a part of selected dates", () => { + const selectedDates = [newDate("2025-11-01")]; + const keyboardSelectedDate = selectedDates[0]; + const day = selectedDates[0] as Date; + + const { container } = render( + , + ); + + const selected = container.querySelector( + ".react-datepicker__quarter-text--selected", + ); + const keyboardSelected = container.querySelector( + ".react-datepicker__quarter-text--keyboard-selected", + ); + + expect(selected).not.toBeNull(); + expect(keyboardSelected).toBeNull(); + }); }); describe("Auto-Focus", () => {