diff --git a/change/@fluentui-react-calendar-compat-cf21ab21-bd90-4ae4-972d-ec1c9888ee2f.json b/change/@fluentui-react-calendar-compat-cf21ab21-bd90-4ae4-972d-ec1c9888ee2f.json new file mode 100644 index 00000000000000..adf36fe3749dc5 --- /dev/null +++ b/change/@fluentui-react-calendar-compat-cf21ab21-bd90-4ae4-972d-ec1c9888ee2f.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "fix: prevent calendar-compat from crashing when value is undefined", + "packageName": "@fluentui/react-calendar-compat", + "email": "vgenaev@gmail.com", + "dependentChangeType": "patch" +} diff --git a/packages/react-components/react-calendar-compat/library/src/components/Calendar/Calendar.test.tsx b/packages/react-components/react-calendar-compat/library/src/components/Calendar/Calendar.test.tsx index aeedbf54a813df..b96347c907d758 100644 --- a/packages/react-components/react-calendar-compat/library/src/components/Calendar/Calendar.test.tsx +++ b/packages/react-components/react-calendar-compat/library/src/components/Calendar/Calendar.test.tsx @@ -1,3 +1,5 @@ +import * as React from 'react'; +import { render } from '@testing-library/react'; import { Calendar } from './Calendar'; import { isConformant } from '../../testing/isConformant'; @@ -15,4 +17,13 @@ describe('Calendar', () => { 'component-has-static-classnames-object', ], }); + + it('should render without crashing when value is undefined', () => { + expect(() => render()).not.toThrow(); + }); + + it('should render correctly when value is undefined', () => { + const { container } = render(); + expect(container.querySelector('[role="grid"]')).not.toBeNull(); + }); }); diff --git a/packages/react-components/react-calendar-compat/library/src/components/Calendar/Calendar.tsx b/packages/react-components/react-calendar-compat/library/src/components/Calendar/Calendar.tsx index 77742015bee966..4130250eda2810 100644 --- a/packages/react-components/react-calendar-compat/library/src/components/Calendar/Calendar.tsx +++ b/packages/react-components/react-calendar-compat/library/src/components/Calendar/Calendar.tsx @@ -330,7 +330,7 @@ export const Calendar: React.FunctionComponent = React.forwardRef dateTimeFormatter.formatMonthDayYear(today, strings!), ); } - if (dateTimeFormatter && strings!.selectedDateFormatString) { + if (dateTimeFormatter && strings!.selectedDateFormatString && selectedDate) { const dateStringFormatter = monthPickerOnly ? dateTimeFormatter.formatMonthYear : dateTimeFormatter.formatMonthDayYear; @@ -349,8 +349,8 @@ export const Calendar: React.FunctionComponent = React.forwardRef {isDayPickerVisible && (