[Bug]: Calendar is not accepting undefined

[jimjacob29]

Component

Calendar (Compat)

Package version

"@fluentui/react-components": "^9.54.17", "@fluentui/react-datepicker-compat": "^0.4.53", "@fluentui/react-timepicker-compat": "^0.2.45",

React version

18.3.1

Environment

System:
    OS: macOS 15.7.4
    CPU: (8) arm64 Apple M2
    Memory: 88.48 MB / 8.00 GB
    Shell: 5.9 - /bin/zsh
  Browsers:
    Safari: 18.6
  npmPackages:
    @fluentui/react-components: ^9.54.17 => 9.55.1 
    @fluentui/react-datepicker-compat: ^0.4.53 => 0.4.53 
    @fluentui/react-timepicker-compat: ^0.2.45 => 0.2.45 
    @types/react: ^18.3.5 => 18.3.5 
    @types/react-dom: ^18.2.14 => 18.2.14 
    react: 18.3.1 => 18.3.1 
    react-dom: 18.3.1 => 18.3.1

Current Behavior

The Calendar component crashes when an undefined value is passed to it. This issue occurs specifically when the date value is programmatically cleared — for example, using a dismiss/clear button — which sets the value to undefined, causing the UI to break entirely.
The root cause appears to be an internal issue within the Calendar component, where dateFormatting.defaults.js attempts to call .getMonth() on an undefined value, resulting in the following error:
dateFormatting.defaults.js:20 Uncaught TypeError: Cannot read properties of undefined (reading 'getMonth')
Stack trace:
dateFormatting.defaults.js:20 Uncaught TypeError: Cannot read properties of undefined (reading 'getMonth')
at formatMonthDayYear (dateFormatting.defaults.js:20:69)
at eval (Calendar.js:255:78)
at renderWithHooks (react-dom.development.js:15486:18)
at updateForwardRef (react-dom.development.js:19240:20)
at beginWork (react-dom.development.js:21670:16)
at HTMLUnknownElement.callCallback (react-dom.development.js:4164:14)
at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:16)
at invokeGuardedCallback (react-dom.development.js:4277:31)
at beginWork$1 (react-dom.development.js:27485:7)
at performUnitOfWork (react-dom.development.js:26591:12)
at workLoopSync (react-dom.development.js:26500:5)
at renderRootSync (react-dom.development.js:26468:7)
at recoverFromConcurrentError (react-dom.development.js:25884:20)
at performSyncWorkOnRoot (react-dom.development.js:26130:20)
at flushSyncCallbacks (react-dom.development.js:12042:22)
at eval (react-dom.development.js:25685:13)
installHook.js:1 The above error occurred in the component:
at eval (webpack-internal:///./node_modules/@fluentui/react-calendar-compat/lib/components/Calendar/Calendar.js:129:13)
at div
at div
at DateRangeFilterRender (webpack-internal:///./components/utilComponents/dealViewFilterDrawerHelper.tsx:462:11)

Expected Behavior

it shouldn't crash the FE web page. it should work as a calendar with no dates picked yet

Reproduction

https://codesandbox.io/p/sandbox/9tytmc?file=%2Fsrc%2FApp.tsx
given a code below

Steps to reproduce

<---code start--->

`import React, { useState } from "react";
import { Calendar } from "@fluentui/react-calendar-compat";
import { FluentProvider, webLightTheme, Button, Title2, Body1, Subtitle2 } from "@fluentui/react-components";

/**

• Reproduction page for Fluent UI Calendar Bug:

• TypeError: Cannot read properties of undefined (reading 'getMonth') at formatMonthDayYear

• Instructions:

• 1. Open this page in your browser.
• 2. Click the "Clear Date" button.
• 3. The application will crash with the TypeError if the bug is present.
     */
     export default function FluentReproPage() {
     const [selectedDate, setSelectedDate] = useState<Date | undefined>(new Date());

  return (
  
  <div style={{ padding: "40px", maxWidth: "800px", margin: "0 auto", display: "flex", flexDirection: "column", gap: "20px" }}>
  Fluent UI Calendar Repro

           <Body1>
               This page demonstrates a crash in <code>@fluentui/react-calendar-compat</code> when the
               <code>value</code> prop is set to <code>undefined</code> or <code>null</code> after it was previously set to a valid date.
           </Body1>
  
           <div style={{ padding: "20px", backgroundColor: "#f5f5f5", borderRadius: "8px" }}>
               <Subtitle2 block>Reproduction Steps:</Subtitle2>
               <ol>
                   <li>Click Clear Date below.</li>
                   <li>Check the developer console for the error.</li>
               </ol>
           </div>
  
           <div style={{ display: "flex", alignItems: "center", gap: "20px" }}>
               <Button appearance="primary" onClick={() => setSelectedDate(undefined)}>
                   Clear Date (Crash trigger)
               </Button>
               <Body1>
                   <strong>Current State:</strong> {selectedDate ? selectedDate.toDateString() : "undefined"}
               </Body1>
           </div>
  
           <div
               style={{
                   marginTop: "20px",
                   border: "1px solid #ddd",
                   borderRadius: "4px",
                   padding: "10px",
                   width: "fit-content",
                   backgroundColor: "white",
               }}
           >
               <Calendar value={selectedDate} onSelectDate={(date) => setSelectedDate(date)} />
           </div>
       </div>
   </FluentProvider>
  

  );
  }`

<---code ends here --->

Are you reporting an Accessibility issue?

None

Suggested severity

Urgent - No workaround and Products/sites are affected

Products/sites affected

No response

Are you willing to submit a PR to fix?

no

Validations

• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• The provided reproduction is a minimal reproducible example of the bug.

[ishaquehassan]

Looking at packages/react-components/react-calendar-compat/library/src/components/Calendar/Calendar.tsx, there is a null-safety gap around line 333 where selectedDate can be undefined when the component is used as a controlled input with value={undefined}.

The condition checks dateTimeFormatter && strings!.selectedDateFormatString, but selectedDateFormatString always has a value from the defaults, so the block runs unconditionally. Inside, dateStringFormatter(selectedDate, strings!) is called where dateStringFormatter is either formatMonthDayYear or formatMonthYear. Both call methods on selectedDate (like .getMonth()) with no null check, causing a crash when selectedDate is undefined.

The fix is to add && selectedDate to the condition:

if (dateTimeFormatter && strings!.selectedDateFormatString && selectedDate) {
  const dateStringFormatter = monthPickerOnly
    ? dateTimeFormatter.formatMonthYear
    : dateTimeFormatter.formatMonthDayYear;
  selectedDateString = strings!.selectedDateFormatString.replace(
    '{0}',
    dateStringFormatter(selectedDate, strings!),
  );
}

This matches how the existing selectedDate && guard is used in the date/month selection handlers in the same file.