DateTimePicker - hours dropdown not re-rendered when state changed programmatically

[rendersbymarsh]

Category

[ ] Enhancement

[x] Bug

[ ] Question

Version

Please specify what version of the library you are using: [ 2.2.0 ]

Expected / Desired Behavior / Question

I have a DateTimePicker on a form that's showing time displayed as dropdowns. If I programmatically change the value of the component, the date portion re-renders successfully but not the hours portion. (Changes made via UI work normally as they fire the onChange handler.)

My specific use case is an Undo button on the form that reverts the form values back to what was initially retrieved from the server.

Initial value:

After change via UI:

After Undo button pressed:

I know the value is actually being changed correctly in code, because if I close the panel containing the form and re-open it the value is back to what I would expect it to be. Therefore I think it's a bug with the component and how it detects a change to the hours portion of the time value.

Observed Behavior

The time portion should change to reflect the current value in state, both hours and minutes.

Steps to Reproduce

Code to recreate issue:

interface Entity {
  dateTimeField: Date;
}

const defaultEntityState = {
  dateTimeField: new Date('October 17, 2020 13:12:00')
};

const ChildComponent: React.FC = () => {
  const [entity, setEntity] = React.useState<Entity>(defaultEntityState);
  
  const onFieldChange = (name: string) => (value: any) => {
    setEntity({
      ...entity, [name]: value
    });
  }
  
  const revertTimeToDefault = (_e) => {
    setEntity(defaultEntityState);
  }
  
  const fieldValue = entity && entity.dateTimeField;
  
  return (
    <>
      <button onClick={revertTimeToDefault} type="button">Revert DateTime</button>
      <DateTimePicker
        firstDayOfWeek={DayOfWeek.Monday}
        strings={DayPickerStrings}
        placeholder="Select a date..."
        showLabels
        dateConvention={DateConvention.DateTime}
        timeConvention={TimeConvention.Hours24}
        timeDisplayControlType={TimeDisplayControlType.Dropdown}
        onChange={onFieldChange('dateTimeField')}
        value={fieldValue instanceof Date ? fieldValue : null}
        />  
    </>
  );
}

DayPickerStrings is just the set of labels:

const DayPickerStrings: IDateTimePickerStrings = {
    dateLabel: 'Date',
    timeLabel: 'Time',
    timeSeparator: ':',
    amDesignator: 'AM',
    pmDesignator: 'PM',
    months: [
        'January',
        'February',
        'March',
        'April',
        'May',
        'June',
        'July',
        'August',
        'September',
        'October',
        'November',
        'December',
    ],
    shortMonths: [
        'Jan',
        'Feb',
        'Mar',
        'Apr',
        'May',
        'Jun',
        'Jul',
        'Aug',
        'Sep',
        'Oct',
        'Nov',
        'Dec',
    ],
    days: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
    shortDays: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
    goToToday: 'Go to today',
    prevMonthAriaLabel: 'Go to previous month',
    nextMonthAriaLabel: 'Go to next month',
    prevYearAriaLabel: 'Go to previous year',
    nextYearAriaLabel: 'Go to next year',
};

[ghost]

Thank you for reporting this issue. We will be triaging your incoming issue as soon as possible.

[AJIXuMuK]

Thank you @BreakfastMaintenance for reporting this!

The fix has been done and will be included in the next release.

In a meanwhile you can test it in the beta version