Fix #3315: Calendar viewstatechange (#3316)

components/lib/calendar/Calendar.js

@@ -2481,7 +2481,7 @@ export const Calendar = React.memo(
         }, [props.onViewDateChange, props.value]);
 
         useUpdateEffect(() => {
-            if (previousValue !== props.value && (!viewStateChanged || !visible)) {
+            if (previousValue !== props.value && (!viewStateChanged.current || !visible)) {
                 updateInputfield(props.value);
             }
         }, [props.value, visible]);
@@ -3261,87 +3261,87 @@ export const Calendar = React.memo(
 Calendar.displayName = 'Calendar';
 Calendar.defaultProps = {
     __TYPE: 'Calendar',
-    id: null,
-    inputRef: null,
-    name: null,
-    value: null,
-    visible: false,
-    viewDate: null,
-    style: null,
+    appendTo: null,
+    ariaLabelledBy: null,
+    autoZIndex: true,
+    baseZIndex: 0,
     className: null,
+    clearButtonClassName: 'p-button-secondary',
+    dateFormat: null,
+    dateTemplate: null,
+    decadeTemplate: null,
+    disabled: false,
+    disabledDates: null,
+    disabledDays: null,
+    footerTemplate: null,
+    headerTemplate: null,
+    hideOnDateTimeSelect: false,
+    hourFormat: '24',
+    icon: 'pi pi-calendar',
+    iconPos: 'right',
+    id: null,
     inline: false,
-    selectionMode: 'single',
-    inputId: null,
-    inputStyle: null,
     inputClassName: null,
+    inputId: null,
     inputMode: 'none',
-    required: false,
-    readOnlyInput: false,
+    inputRef: null,
+    inputStyle: null,
     keepInvalid: false,
+    locale: null,
     mask: null,
-    disabled: false,
-    tabIndex: null,
+    maxDate: null,
+    maxDateCount: null,
+    minDate: null,
+    monthNavigator: false,
+    monthNavigatorTemplate: null,
+    name: null,
+    numberOfMonths: 1,
+    onBlur: null,
+    onChange: null,
+    onClearButtonClick: null,
+    onFocus: null,
+    onHide: null,
+    onInput: null,
+    onMonthChange: null,
+    onSelect: null,
+    onShow: null,
+    onTodayButtonClick: null,
+    onViewDateChange: null,
+    onVisibleChange: null,
+    panelClassName: null,
+    panelStyle: null,
     placeholder: null,
+    readOnlyInput: false,
+    required: false,
+    selectOtherMonths: false,
+    selectionMode: 'single',
+    shortYearCutoff: '+10',
+    showButtonBar: false,
     showIcon: false,
-    icon: 'pi pi-calendar',
-    iconPos: 'right',
+    showMillisec: false,
+    showMinMaxRange: false,
     showOnFocus: true,
-    numberOfMonths: 1,
-    view: 'date',
-    touchUI: false,
-    showTime: false,
-    timeOnly: false,
+    showOtherMonths: true,
     showSeconds: false,
-    showMillisec: false,
-    hourFormat: '24',
+    showTime: false,
+    showWeek: false,
     stepHour: 1,
+    stepMillisec: 1,
     stepMinute: 1,
     stepSecond: 1,
-    stepMillisec: 1,
-    shortYearCutoff: '+10',
-    hideOnDateTimeSelect: false,
-    showWeek: false,
-    locale: null,
-    dateFormat: null,
-    panelStyle: null,
-    panelClassName: null,
-    monthNavigator: false,
-    yearNavigator: false,
-    yearRange: null,
-    disabledDates: null,
-    disabledDays: null,
-    minDate: null,
-    maxDate: null,
-    maxDateCount: null,
-    showMinMaxRange: false,
-    showOtherMonths: true,
-    selectOtherMonths: false,
-    showButtonBar: false,
+    style: null,
+    tabIndex: null,
+    timeOnly: false,
     todayButtonClassName: 'p-button-secondary',
-    clearButtonClassName: 'p-button-secondary',
-    autoZIndex: true,
-    baseZIndex: 0,
-    appendTo: null,
     tooltip: null,
     tooltipOptions: null,
-    ariaLabelledBy: null,
-    dateTemplate: null,
-    decadeTemplate: null,
-    headerTemplate: null,
-    footerTemplate: null,
-    monthNavigatorTemplate: null,
-    yearNavigatorTemplate: null,
+    touchUI: false,
     transitionOptions: null,
-    onVisibleChange: null,
-    onFocus: null,
-    onBlur: null,
-    onInput: null,
-    onSelect: null,
-    onChange: null,
-    onViewDateChange: null,
-    onTodayButtonClick: null,
-    onClearButtonClick: null,
-    onShow: null,
-    onHide: null,
-    onMonthChange: null
+    value: null,
+    view: 'date',
+    viewDate: null,
+    visible: false,
+    yearNavigator: false,
+    yearNavigatorTemplate: null,
+    yearRange: null
 };

components/lib/calendar/calendar.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import TooltipOptions from '../tooltip/tooltipoptions';
 import { CSSTransitionProps } from '../csstransition';
+import TooltipOptions from '../tooltip/tooltipoptions';
 import { IconType } from '../utils';
 
 type CalendarAppendToType = 'self' | HTMLElement | undefined | null;
@@ -72,89 +72,89 @@ interface CalendarMonthNavigatorTemplateParams extends CalendarNavigatorTemplate
 interface CalendarYearNavigatorTemplateParams extends CalendarNavigatorTemplateParams {}
 
 export interface CalendarProps {
-    id?: string;
-    inputRef?: React.Ref<HTMLInputElement>;
-    name?: string;
-    value?: Date | Date[];
-    visible?: boolean;
-    viewDate?: Date;
-    style?: object;
+    appendTo?: CalendarAppendToType;
+    ariaLabelledBy?: string;
+    autoZIndex?: boolean;
+    baseZIndex?: number;
+    children?: React.ReactNode;
     className?: string;
+    clearButtonClassName?: string;
+    dateFormat?: string;
+    disabled?: boolean;
+    disabledDates?: Date[];
+    disabledDays?: number[];
+    hideOnDateTimeSelect?: boolean;
+    hourFormat?: string;
+    icon?: IconType<CalendarProps>;
+    iconPos?: CalendarIconPosType;
+    id?: string;
     inline?: boolean;
-    selectionMode?: string;
+    inputClassName?: string;
     inputId?: string;
+    inputRef?: React.Ref<HTMLInputElement>;
     inputStyle?: object;
-    inputClassName?: string;
-    required?: boolean;
-    readOnlyInput?: boolean;
     keepInvalid?: boolean;
+    locale?: string;
     mask?: string;
-    disabled?: boolean;
-    tabIndex?: number;
+    maxDate?: Date;
+    maxDateCount?: number;
+    minDate?: Date;
+    monthNavigator?: boolean;
+    name?: string;
+    numberOfMonths?: number;
+    panelClassName?: string;
+    panelStyle?: object;
     placeholder?: string;
+    readOnlyInput?: boolean;
+    required?: boolean;
+    selectOtherMonths?: boolean;
+    selectionMode?: string;
+    shortYearCutoff?: string;
+    showButtonBar?: boolean;
     showIcon?: boolean;
-    icon?: IconType<CalendarProps>;
-    iconPos?: CalendarIconPosType;
+    showMillisec?: boolean;
+    showMinMaxRange?: boolean;
     showOnFocus?: boolean;
-    numberOfMonths?: number;
-    view?: string;
-    touchUI?: boolean;
-    showTime?: boolean;
-    timeOnly?: boolean;
+    showOtherMonths?: boolean;
     showSeconds?: boolean;
-    showMillisec?: boolean;
-    hourFormat?: string;
+    showTime?: boolean;
+    showWeek?: boolean;
     stepHour?: number;
+    stepMillisec?: number;
     stepMinute?: number;
     stepSecond?: number;
-    stepMillisec?: number;
-    shortYearCutoff?: string;
-    hideOnDateTimeSelect?: boolean;
-    showWeek?: boolean;
-    locale?: string;
-    dateFormat?: string;
-    panelStyle?: object;
-    panelClassName?: string;
-    monthNavigator?: boolean;
-    yearNavigator?: boolean;
-    yearRange?: string;
-    disabledDates?: Date[];
-    disabledDays?: number[];
-    minDate?: Date;
-    maxDate?: Date;
-    maxDateCount?: number;
-    showMinMaxRange?: boolean;
-    showOtherMonths?: boolean;
-    selectOtherMonths?: boolean;
-    showButtonBar?: boolean;
+    style?: object;
+    tabIndex?: number;
+    timeOnly?: boolean;
     todayButtonClassName?: string;
-    clearButtonClassName?: string;
-    autoZIndex?: boolean;
-    baseZIndex?: number;
-    appendTo?: CalendarAppendToType;
     tooltip?: string;
     tooltipOptions?: TooltipOptions;
-    ariaLabelledBy?: string;
+    touchUI?: boolean;
     transitionOptions?: CSSTransitionProps;
+    value?: Date | Date[];
+    view?: string;
+    viewDate?: Date;
+    visible?: boolean;
+    yearNavigator?: boolean;
+    yearRange?: string;
     dateTemplate?(e: CalendarDateTemplateParams): React.ReactNode;
     decadeTempate?(yearValues: number[]): React.ReactNode;
-    headerTemplate?(): React.ReactNode;
     footerTemplate?(): React.ReactNode;
+    headerTemplate?(): React.ReactNode;
     monthNavigatorTemplate?(e: CalendarMonthNavigatorTemplateParams): React.ReactNode;
-    yearNavigatorTemplate?(e: CalendarYearNavigatorTemplateParams): React.ReactNode;
-    onVisibleChange?(e: CalendarVisibleChangeParams): void;
-    onFocus?(event: React.FocusEvent<HTMLInputElement>): void;
     onBlur?(event: React.FocusEvent<HTMLInputElement>): void;
-    onInput?(event: React.FormEvent<HTMLInputElement>): void;
-    onSelect?(e: CalendarSelectParams): void;
     onChange?(e: CalendarChangeParams): void;
-    onMonthChange?(e: CalendarMonthChangeParams): void;
-    onViewDateChange?(e: CalendarViewChangeParams): void;
-    onTodayButtonClick?(event: React.MouseEvent<HTMLButtonElement>): void;
     onClearButtonClick?(event: React.MouseEvent<HTMLButtonElement>): void;
-    onShow?(): void;
+    onFocus?(event: React.FocusEvent<HTMLInputElement>): void;
     onHide?(): void;
-    children?: React.ReactNode;
+    onInput?(event: React.FormEvent<HTMLInputElement>): void;
+    onMonthChange?(e: CalendarMonthChangeParams): void;
+    onSelect?(e: CalendarSelectParams): void;
+    onShow?(): void;
+    onTodayButtonClick?(event: React.MouseEvent<HTMLButtonElement>): void;
+    onViewDateChange?(e: CalendarViewChangeParams): void;
+    onVisibleChange?(e: CalendarVisibleChangeParams): void;
+    yearNavigatorTemplate?(e: CalendarYearNavigatorTemplateParams): React.ReactNode;
 }
 
 export declare class Calendar extends React.Component<CalendarProps, any> {