fix: the month and year cannot be switched after the datepicker is rendered in Calendar

Author: edc-hui

src/PickerPanel.tsx

@@ -216,6 +216,8 @@ function PickerPanel<DateType>(props: PickerPanelProps<DateType>) {
     },
   });
 
+  const originalValue = React.useRef(value);
+
   const setViewDate = (date: DateType) => {
     setInnerViewDate(date);
     if (onPickerValueChange) {
@@ -334,8 +336,9 @@ function PickerPanel<DateType>(props: PickerPanelProps<DateType>) {
 
   // ============================ Effect ============================
   React.useEffect(() => {
-    if (value && !initRef.current) {
+    if (value && !isEqual(generateConfig, value, originalValue.current) && !initRef.current) {
       setInnerViewDate(value);
+      originalValue.current = value;
     }
   }, [value]);
 

tests/panel.spec.tsx

@@ -8,10 +8,13 @@ import zhCN from '../src/locale/zh_CN';
 import {
   clickButton,
   confirmOK,
+  findCell,
   getMoment,
+  isOpen,
   isSame,
   MomentPickerPanel,
   selectCell,
+  Calendar
 } from './util/commonUtil';
 
 jest.mock('../src/utils/uiUtil', () => {
@@ -557,4 +560,37 @@ describe('Picker.Panel', () => {
       });
     });
   });
+
+  it('calendar', () => {
+    const { container } = render(<Calendar />);
+    expect(container.querySelector('.rc-picker-month-panel')).toBeTruthy();
+    const inputElements: any = container.querySelectorAll('.rc-picker-month-panel input');
+    expect(inputElements.length).toBe(12);
+    const inputElement = inputElements[0];
+    expect(inputElement.value).toBe("");
+
+    fireEvent.mouseDown(inputElement);
+    fireEvent.focus(inputElement);
+    expect(isOpen()).toBeTruthy();
+    const monthDOM = document.querySelector('.rc-picker-header-view > .rc-picker-month-btn') as HTMLElement;
+    const lastMonthBtnValue = monthDOM.innerHTML;
+    fireEvent.click(document.querySelector('.rc-picker-dropdown .rc-picker-header-prev-btn'));
+    const currentMonthBtnValue = monthDOM.innerHTML;
+    expect(lastMonthBtnValue !== currentMonthBtnValue).toBeTruthy();
+
+    const cell = findCell(2, 1);
+    fireEvent.click(cell);
+    jest.runAllTimers();
+    expect(inputElement.value).not.toBeNull();
+    expect(isOpen()).toBeFalsy();
+
+    fireEvent.mouseDown(inputElement);
+    fireEvent.focus(inputElement);
+    expect(isOpen()).toBeTruthy();
+    const monthDOMNew = document.querySelector('.rc-picker-header-view > .rc-picker-month-btn') as HTMLElement;
+    const lastMonthBtnValueNew = monthDOMNew.innerHTML;
+    fireEvent.click(document.querySelector('.rc-picker-dropdown .rc-picker-header-prev-btn'));
+    const currentMonthBtnValueNew = monthDOMNew.innerHTML;
+    expect(lastMonthBtnValueNew !== currentMonthBtnValueNew).toBeTruthy();
+  });
 });

tests/util/commonUtil.tsx

@@ -1,10 +1,11 @@
-import React from 'react';
+import React, { useState } from 'react';
 // import { mount as originMount, ReactWrapper } from 'enzyme';
 import { fireEvent } from '@testing-library/react';
 import moment, { Moment, unitOfTime } from 'moment';
 import Picker, { PickerPanel, PickerProps } from '../../src';
 import momentGenerateConfig from '../../src/generate/moment';
 import enUS from '../../src/locale/en_US';
+import zhCN from '../../src/locale/zh_CN';
 import { PickerBaseProps, PickerDateProps, PickerTimeProps } from '../../src/Picker';
 import {
   PickerPanelBaseProps,
@@ -95,6 +96,31 @@ export const MomentPickerPanel = (props: MomentPickerPanelProps) => (
   <PickerPanel<Moment> generateConfig={momentGenerateConfig} locale={enUS} {...props} />
 );
 
+export const Calendar = () => {
+  const [date, setDate] = useState<Moment | null>(null);
+  return (
+    <PickerPanel<Moment>
+      locale={zhCN}
+      mode="month"
+      generateConfig={momentGenerateConfig}
+      monthCellRender={(value) => {
+        return (
+          <Picker<Moment>
+            locale={zhCN}
+            generateConfig={momentGenerateConfig}
+            value={date ? moment(date) : null}
+            onChange={(dateValue) => {
+              setDate(dateValue);
+            }}
+          />
+        )
+      }}
+      dateRender={() => null}
+      hideHeader
+    />
+  )
+}
+
 // Moment Range Picker
 export type MomentRangePickerProps =
   | InjectDefaultProps<RangePickerBaseProps<Moment>>