fix(date-picker): month and year picker scroller

.changeset/serious-snails-count.md

@@ -0,0 +1,6 @@
+---
+"@nextui-org/accordion": minor
+"@nextui-org/calendar": patch
+---
+
+Fixing the UI and data syncing of the month/year picker.

.changeset/sixty-weeks-help.md

@@ -0,0 +1,7 @@
+---
+"@nextui-org/accordion": patch
+"@nextui-org/calendar": patch
+"@nextui-org/date-picker": patch
+---
+
+Added an aria and test label for the picker toggle.

packages/components/calendar/src/calendar-header.tsx

@@ -18,6 +18,8 @@ export interface CalendarHeaderProps extends HTMLNextUIProps<"header"> {
   buttonPickerProps?: ButtonProps;
 }
 
+export const monthAndYearPickerToggle = "Month and year picker toggle";
+
 export function CalendarHeader(props: CalendarHeaderProps) {
   const {direction, date, currentMonth, buttonPickerProps} = props;
 
@@ -99,6 +101,7 @@ export function CalendarHeader(props: CalendarHeaderProps) {
   return showMonthAndYearPickers ? (
     <Button
       {...headerProps}
+      aria-label={monthAndYearPickerToggle}
       disableAnimation={disableAnimation}
       endContent={<ChevronDownIcon className="chevron-icon" />}
       onKeyDown={handleKeyDown}

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

@@ -3,9 +3,7 @@ import type {PressEvent} from "@react-types/shared";
 
 import {useDateFormatter} from "@react-aria/i18n";
 import {HTMLNextUIProps} from "@nextui-org/system";
-import {useCallback, useRef, useEffect} from "react";
-import debounce from "lodash.debounce";
-import {areRectsIntersecting} from "@nextui-org/react-utils";
+import {useCallback, useEffect, useRef} from "react";
 import scrollIntoView from "scroll-into-view-if-needed";
 
 import {getMonthsInYear, getYearRange} from "./utils";
@@ -15,6 +13,7 @@ export type PickerValue = {
   value: string;
   label: string;
 };
+
 export interface CalendarPickerProps extends HTMLNextUIProps<"div"> {
   date: CalendarDate;
   currentMonth: CalendarDate;
@@ -23,8 +22,6 @@ export interface CalendarPickerProps extends HTMLNextUIProps<"div"> {
 type ItemsRefMap = Map<number, HTMLElement>;
 type CalendarPickerListType = "months" | "years";
 
-const SCROLL_DEBOUNCE_TIME = 200;
-
 export function useCalendarPicker(props: CalendarPickerProps) {
   const {date, currentMonth} = props;
 
@@ -83,36 +80,6 @@ export function useCalendarPicker(props: CalendarPickerProps) {
     }
   }
 
-  const handleListScroll = useCallback(
-    (e: Event, highlightEl: HTMLElement | null, list: CalendarPickerListType) => {
-      if (!(e.target instanceof HTMLElement)) return;
-
-      const map = getItemsRefMap(list === "months" ? monthsItemsRef : yearsItemsRef);
-
-      const items = Array.from(map.values());
-
-      const item = items.find((itemEl) => {
-        const rect1 = itemEl.getBoundingClientRect();
-        const rect2 = highlightEl?.getBoundingClientRect();
-
-        if (!rect2) {
-          return false;
-        }
-
-        return areRectsIntersecting(rect1, rect2);
-      });
-
-      const itemValue = Number(item?.getAttribute("data-value"));
-
-      if (!itemValue) return;
-
-      let date = state.focusedDate.set(list === "months" ? {month: itemValue} : {year: itemValue});
-
-      state.setFocusedDate(date);
-    },
-    [state, isHeaderExpanded],
-  );
-
   // scroll to the selected month/year when the component is mounted/opened/closed
   useEffect(() => {
     if (!isHeaderExpanded) return;
@@ -121,36 +88,6 @@ export function useCalendarPicker(props: CalendarPickerProps) {
     scrollTo(date.year, "years", false);
   }, [isHeaderExpanded]);
 
-  useEffect(() => {
-    // add scroll event listener to monthsListRef
-    const monthsList = monthsListRef.current;
-    const yearsList = yearsListRef.current;
-    const highlightEl = highlightRef.current;
-
-    if (!highlightEl) return;
-
-    const debouncedHandleMonthsScroll = debounce(
-      (e: Event) => handleListScroll(e, highlightEl, "months"),
-      SCROLL_DEBOUNCE_TIME,
-    );
-    const debouncedHandleYearsScroll = debounce(
-      (e: Event) => handleListScroll(e, highlightEl, "years"),
-      SCROLL_DEBOUNCE_TIME,
-    );
-
-    monthsList?.addEventListener("scroll", debouncedHandleMonthsScroll);
-    yearsList?.addEventListener("scroll", debouncedHandleYearsScroll);
-
-    return () => {
-      if (debouncedHandleMonthsScroll) {
-        monthsList?.removeEventListener("scroll", debouncedHandleMonthsScroll);
-      }
-      if (debouncedHandleYearsScroll) {
-        yearsList?.removeEventListener("scroll", debouncedHandleYearsScroll);
-      }
-    };
-  }, [handleListScroll]);
-
   function scrollTo(value: number, list: CalendarPickerListType, smooth = true) {
     const mapListRef = list === "months" ? monthsItemsRef : yearsItemsRef;
     const listRef = list === "months" ? monthsListRef : yearsListRef;
@@ -160,6 +97,9 @@ export function useCalendarPicker(props: CalendarPickerProps) {
     const node = map.get(value);
 
     if (!node) return;
+    let date = state.focusedDate.set(list === "months" ? {month: value} : {year: value});
+
+    state.setFocusedDate(date);
 
     // scroll picker list to the selected item
     scrollIntoView(node, {

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

@@ -5,6 +5,7 @@ import {pointerMap, triggerPress} from "@nextui-org/test-utils";
 import userEvent from "@testing-library/user-event";
 import {CalendarDate, CalendarDateTime} from "@internationalized/date";
 import {NextUIProvider} from "@nextui-org/system";
+import {monthAndYearPickerToggle} from "@nextui-org/calendar/src/calendar-header";
 
 import {DatePicker as DatePickerBase, DatePickerProps} from "../src";
 
@@ -524,6 +525,7 @@ describe("DatePicker", () => {
 
   describe("Month and Year Picker", () => {
     const onHeaderExpandedChangeSpy = jest.fn();
+    const valueChangeSpy = jest.fn();
 
     afterEach(() => {
       onHeaderExpandedChangeSpy.mockClear();
@@ -600,6 +602,48 @@ describe("DatePicker", () => {
       expect(onHeaderExpandedChangeSpy).not.toHaveBeenCalled();
     });
 
+    it("should focus the month and year when pressed in the picker", () => {
+      const {getByRole, getByLabelText} = render(
+        <DatePicker
+          showMonthAndYearPickers
+          calendarProps={{
+            isHeaderExpanded: true,
+            onChange: valueChangeSpy,
+          }}
+          defaultValue={new CalendarDate(2024, 4, 26)}
+          label="Date"
+        />,
+      );
+      const dialogButton = getByRole("button");
+
+      triggerPress(dialogButton);
+
+      const dialog = getByRole("dialog");
+      const month = getByRole("button", {name: "April"});
+      const year = getByRole("button", {name: "2024"});
+
+      expect(dialog).toBeVisible();
+      expect(month).toHaveAttribute("data-value", "4");
+      expect(year).toHaveAttribute("data-value", "2024");
+
+      const button = getByLabelText(monthAndYearPickerToggle);
+
+      triggerPress(button);
+
+      const monthBefore = getByRole("button", {name: "March"});
+      const yearBefore = getByRole("button", {name: "2023"});
+
+      expect(monthBefore).toHaveAttribute("data-value", "3");
+      expect(yearBefore).toHaveAttribute("data-value", "2023");
+      expect(monthBefore).toHaveAttribute("tabindex", "-1");
+      expect(yearBefore).toHaveAttribute("tabindex", "-1");
+      triggerPress(monthBefore);
+      triggerPress(yearBefore);
+      expect(valueChangeSpy).not.toHaveBeenCalled();
+      expect(monthBefore).toHaveAttribute("tabindex", "0");
+      expect(yearBefore).toHaveAttribute("tabindex", "0");
+    });
+
     it("CalendarBottomContent should render correctly", () => {
       const {getByRole, getByTestId} = render(
         <DatePicker