fix(datePicker): prevent year, month change in showMonthAndYearPicker…

…s mode (#3088)

* fix: prevent year, month change error in showMonthAndYearPickers mode

* docs: add changeset

* docs: edit changeset

* test:  add test code about date clear issue in date picker

* test: update test code

* test: check application aria is same with current date

* chore(changeset): revise package and add issue number

---------

Co-authored-by: WK Wong <wingkwong.code@gmail.com>

.changeset/tidy-squids-knock.md

@@ -0,0 +1,6 @@
+---
+"@nextui-org/calendar": patch
+"@nextui-org/date-picker": patch
+---
+
+fix hours, month clear issue in `showMonthAndYearPickers` mode (#3072).

packages/components/calendar/src/use-calendar-picker.ts

@@ -115,6 +115,8 @@ export function useCalendarPicker(props: CalendarPickerProps) {
 
   // scroll to the selected month/year when the component is mounted/opened/closed
   useEffect(() => {
+    if (!isHeaderExpanded) return;
+
     scrollTo(date.month, "months", false);
     scrollTo(date.year, "years", false);
   }, [isHeaderExpanded]);

packages/components/date-picker/__tests__/date-picker.test.tsx

@@ -498,6 +498,28 @@ describe("DatePicker", () => {
       expect(onChange).toHaveBeenCalledWith(new CalendarDate(2019, 2, 4));
       expect(getTextValue(combobox)).toBe("2/4/2019"); // uncontrolled
     });
+
+    it("should keep the selected date when the picker is opened, in showMonthAndYearPickers mode", function () {
+      const {getByRole, getAllByRole} = render(
+        <DatePicker showMonthAndYearPickers label="Date" value={new CalendarDate(2024, 5, 1)} />,
+      );
+
+      let combobox = getAllByRole("group")[0];
+
+      expect(getTextValue(combobox)).toBe("5/1/2024");
+
+      let button = getByRole("button");
+
+      triggerPress(button);
+
+      let dialog = getByRole("dialog");
+
+      expect(dialog).toBeVisible();
+
+      const content = getByRole("application");
+
+      expect(content).toHaveAttribute("aria-label", "May 2024");
+    });
   });
 
   describe("Month and Year Picker", () => {