From da382fb4b09239a5c9fc3cc1473a58c6d763d73c Mon Sep 17 00:00:00 2001 From: Balaji Sridharan Date: Mon, 24 Jun 2024 13:09:42 +0530 Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20Remove=20the=20auto=20set=20of?= =?UTF-8?q?=20the=20'--keyboard-selected'=20class=20from=20the=20disabled?= =?UTF-8?q?=20dates=20from=20the=20next=20or=20the=20previous=20view?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Closes #4933 --- src/day.tsx | 13 ++++++-- src/month.tsx | 14 +++++++-- src/test/day_test.test.tsx | 11 +++++++ src/test/month_test.test.tsx | 49 ++++++++++++++++++++++++++++++ src/test/year_picker_test.test.tsx | 29 ++++++++++++++++++ src/year.tsx | 11 ++++++- 6 files changed, 121 insertions(+), 6 deletions(-) diff --git a/src/day.tsx b/src/day.tsx index 3d8f929ed..ecb40ce4c 100644 --- a/src/day.tsx +++ b/src/day.tsx @@ -188,13 +188,20 @@ export default class Day extends Component { ? this.props.selectedDates?.some((date) => this.isSameDayOrWeek(date)) : this.isSameDayOrWeek(this.props.selected); - return !isSelectedDate && this.isSameDayOrWeek(this.props.preSelection); + const isDisabled = + this.props.preSelection && this.isDisabled(this.props.preSelection); + + return ( + !isSelectedDate && + this.isSameDayOrWeek(this.props.preSelection) && + !isDisabled + ); }; - isDisabled = () => + isDisabled = (day = this.props.day) => // Almost all props previously were passed as this.props w/o proper typing with prop-types // after the migration to TS i made it explicit - isDayDisabled(this.props.day, { + isDayDisabled(day, { minDate: this.props.minDate, maxDate: this.props.maxDate, excludeDates: this.props.excludeDates, diff --git a/src/month.tsx b/src/month.tsx index f69477d7a..1624bfd64 100644 --- a/src/month.tsx +++ b/src/month.tsx @@ -797,7 +797,8 @@ export default class Month extends Component { "react-datepicker__month-text--keyboard-selected": !this.props.disabledKeyboardNavigation && preSelection && - this.isSelectedMonth(day, m, preSelection), + this.isSelectedMonth(day, m, preSelection) && + !this.isMonthDisabled(m), "react-datepicker__month-text--in-selecting-range": this.isInSelectingRangeMonth(m), "react-datepicker__month-text--in-range": @@ -865,9 +866,17 @@ export default class Month extends Component { selected, minDate, maxDate, + excludeDates, + includeDates, + filterDate, preSelection, disabledKeyboardNavigation, } = this.props; + + const isDisabled = + (minDate || maxDate || excludeDates || includeDates || filterDate) && + isQuarterDisabled(setQuarter(day, q), this.props); + return clsx( "react-datepicker__quarter-text", `react-datepicker__quarter-${q}`, @@ -881,7 +890,8 @@ export default class Month extends Component { "react-datepicker__quarter-text--keyboard-selected": !disabledKeyboardNavigation && preSelection && - this.isSelectedQuarter(day, q, preSelection), + this.isSelectedQuarter(day, q, preSelection) && + !isDisabled, "react-datepicker__quarter-text--in-selecting-range": this.isInSelectingRangeQuarter(q), "react-datepicker__quarter-text--in-range": diff --git a/src/test/day_test.test.tsx b/src/test/day_test.test.tsx index 07c347a68..3fff9254e 100644 --- a/src/test/day_test.test.tsx +++ b/src/test/day_test.test.tsx @@ -164,6 +164,17 @@ describe("Day", () => { ).toBe(true); }); + it("should not apply the key-selected class when pre-selected is a part of disabled dates", () => { + const day = newDate(); + const container = renderDay(day, { + excludeDates: [day], + preSelection: day, + }); + const dayNode = container.querySelector(".react-datepicker__day")!; + + expect(dayNode.classList.contains(className)).toBe(false); + }); + it("should not apply the keyboard-selected class when selected", () => { const day = newDate(); const container = renderDay(day, { selected: day, preSelection: day }); diff --git a/src/test/month_test.test.tsx b/src/test/month_test.test.tsx index 765800acc..9cb9dd12a 100644 --- a/src/test/month_test.test.tsx +++ b/src/test/month_test.test.tsx @@ -2372,4 +2372,53 @@ describe("Month", () => { ).toBe(false); }); }); + + describe("keyboard-selected", () => { + it("should not apply the keyboard-selected class when the month is a part of disabled dates", () => { + const keyboardSelectedDate = newDate("2024-06-03"); + const excludeDates = [addWeeks(keyboardSelectedDate, 1)]; + + const { container } = render( + , + ); + expect( + container.querySelector( + ".react-datepicker__month-text--keyboard-selected", + ), + ).toBeNull(); + }); + + it("should not apply the keyboard-selected class when the quarter is a part of disabled dates", () => { + const currentSelectedDate = newDate("2023-08-08"); + const maxDate = newDate("2024-08-03"); + + const { container } = render( + , + ); + const dateInput = container.querySelector("input")!; + fireEvent.focus(dateInput); + + const calendar = container.querySelector(".react-datepicker")!; + const nextButton = calendar.querySelector( + ".react-datepicker__navigation--next", + )!; + fireEvent.click(nextButton); + + expect( + container.querySelector( + ".react-datepicker__quarter-text--keyboard-selected", + ), + ).toBeNull(); + }); + }); }); diff --git a/src/test/year_picker_test.test.tsx b/src/test/year_picker_test.test.tsx index d7aa4cf80..a1a802646 100644 --- a/src/test/year_picker_test.test.tsx +++ b/src/test/year_picker_test.test.tsx @@ -603,6 +603,35 @@ describe("YearPicker", () => { ); expect(allPreselectedYears.length).toBe(1); }); + + it("should not set the key-selected class when the year is a part of disabled dates", () => { + const date = newDate("2024-06-01"); + const excludeDates = [newDate("2036-05-05")]; + + const { container } = render( + , + ); + + const dateInput = container.querySelector("input")!; + fireEvent.focus(dateInput); + + const calendar = container.querySelector(".react-datepicker")!; + const nextButton = calendar.querySelector( + ".react-datepicker__navigation--next", + )!; + fireEvent.click(nextButton); + + expect( + container.querySelector( + ".react-datepicker__year-text--keyboard-selected", + ), + ).toBeNull(); + }); }); describe("Keyboard navigation", () => { diff --git a/src/year.tsx b/src/year.tsx index 551e63d53..a382691c2 100644 --- a/src/year.tsx +++ b/src/year.tsx @@ -222,12 +222,21 @@ export default class Year extends Component { ) { return; } + + const { minDate, maxDate, excludeDates, includeDates, filterDate } = + this.props; + const date = getStartOfYear(setYear(this.props.date, y)); + const isDisabled = + (minDate || maxDate || excludeDates || includeDates || filterDate) && + isYearDisabled(y, this.props); + return ( !this.props.disabledKeyboardNavigation && !this.props.inline && !isSameDay(date, getStartOfYear(this.props.selected)) && - isSameDay(date, getStartOfYear(this.props.preSelection)) + isSameDay(date, getStartOfYear(this.props.preSelection)) && + !isDisabled ); };