fix: Bug: Date picker controls cause MFE error on Safari #2323

Author: Ahtesham Quraish

package-lock.json

@@ -80,7 +80,7 @@
     "moment-shortformat": "^2.1.0",
     "prop-types": "^15.8.1",
     "react": "^18.3.1",
-    "react-datepicker": "^4.13.0",
+    "react-datepicker": "^7.6.0",
     "react-dom": "^18.3.1",
     "react-error-boundary": "^4.0.13",
     "react-helmet": "^6.1.0",

package.json

@@ -934,7 +934,7 @@ describe('<CourseOutline />', () => {
   it('check configure modal for section', async () => {
     const { findByTestId, findAllByTestId } = renderComponent();
     const section = courseOutlineIndexMock.courseStructure.childInfo.children[0];
-    const newReleaseDateIso = '2025-09-10T22:00:00Z';
+    const newReleaseDateIso = '2025-09-10T22:00:00.000Z';
     const newReleaseDate = '09/10/2025';
     axiosMock
       .onPost(getCourseItemApiUrl(section.id), {
@@ -999,7 +999,7 @@ describe('<CourseOutline />', () => {
       prereqMinCompletion: 100,
       metadata: {
         visible_to_staff_only: null,
-        due: '2025-09-10T05:00:00Z',
+        due: '2025-09-10T05:00:00.000Z',
         hide_after_due: true,
         show_correctness: 'always',
         is_practice_exam: false,
@@ -1008,7 +1008,7 @@ describe('<CourseOutline />', () => {
         exam_review_rules: '',
         default_time_limit_minutes: 3270,
         is_onboarding_exam: false,
-        start: '2025-08-10T00:00:00Z',
+        start: '2025-08-10T00:00:00.000Z',
       },
     };
 

src/course-outline/CourseOutline.test.tsx

@@ -389,5 +389,38 @@ describe('<CourseUpdates />', () => {
       expect(getByText(courseHandoutsMock.data)).toBeVisible();
       expect(getByText(messages.savingHandoutsErrorDescription.defaultMessage));
     });
+
+    it.only('should trigger handleUpdatesSubmit when submitting the form', async () => {
+      const { getByRole, getByText } = render(<RootWrapper />);
+
+      // Open form
+      const newUpdateButton = getByRole('button', { name: messages.newUpdateButton.defaultMessage });
+      fireEvent.click(newUpdateButton);
+
+      // Wait for form
+      await waitFor(() => {
+        expect(getByText('Add new update')).toBeInTheDocument();
+      });
+
+      // Mock POST response
+      const submittedUpdate = {
+        content: '<p>Submitted update content</p>',
+        date: 'August 15, 2025',
+      };
+
+      axiosMock
+        .onPost(getCourseUpdatesApiUrl(courseId))
+        .reply(200, submittedUpdate);
+
+      // Simulate form submit by clicking the Save button
+      const saveButton = getByRole('button', { name: /Post/i }); // Match case-insensitively
+      fireEvent.click(saveButton);
+
+      // Expect new update to be rendered
+      await waitFor(() => {
+        expect(getByText('Submitted update content')).toBeInTheDocument();
+        expect(getByText('August 15, 2025')).toBeInTheDocument();
+      });
+    });
   });
 });

src/course-updates/CourseUpdates.test.jsx

@@ -4,7 +4,6 @@ import { useEffect, useState } from 'react';
 import { useToggle } from '@openedx/paragon';
 
 import { COMMA_SEPARATED_DATE_FORMAT } from '../constants';
-import { convertToDateFromString } from '../utils';
 import { getCourseHandouts, getCourseUpdates } from './data/selectors';
 import { REQUEST_TYPES } from './constants';
 import {
@@ -56,7 +55,7 @@ const useCourseUpdates = ({ courseId }) => {
   };
 
   const handleUpdatesSubmit = (data) => {
-    const dateWithoutTimezone = convertToDateFromString(data.date);
+    const dateWithoutTimezone = (data.date);
     const dataToSend = {
       ...data,
       date: moment(dateWithoutTimezone).format(COMMA_SEPARATED_DATE_FORMAT),

src/course-updates/hooks.jsx

@@ -0,0 +1,151 @@
+import moment from 'moment';
+import { REQUEST_TYPES } from './constants';
+import {
+  createCourseUpdateQuery,
+  editCourseUpdateQuery,
+  editCourseHandoutsQuery,
+} from './data/thunk';
+import { COMMA_SEPARATED_DATE_FORMAT } from '../constants';
+
+jest.mock('react-redux', () => ({
+  useDispatch: jest.fn(),
+  useSelector: jest.fn(),
+}));
+
+jest.mock('./data/thunk', () => ({
+  createCourseUpdateQuery: jest.fn(),
+  editCourseUpdateQuery: jest.fn(),
+  editCourseHandoutsQuery: jest.fn(),
+}));
+
+jest.mock('../constants', () => ({
+  COMMA_SEPARATED_DATE_FORMAT: 'YYYY,MM,DD',
+}));
+
+describe('handleUpdatesSubmit', () => {
+  let dispatchMock;
+  let closeUpdateFormMock;
+  let setCurrentUpdateMock;
+
+  const courseId = 'course-v1:test+T101+2025_T1';
+
+  beforeEach(() => {
+    dispatchMock = jest.fn();
+    closeUpdateFormMock = jest.fn();
+    setCurrentUpdateMock = jest.fn();
+
+    jest.requireActual('./hooks');
+  });
+
+  const getMockHookContext = (requestType) => {
+    jest.requireActual('../hooks');
+
+    return {
+      requestType,
+      courseId,
+      closeUpdateForm: closeUpdateFormMock,
+      setCurrentUpdate: setCurrentUpdateMock,
+      dispatch: dispatchMock,
+      initialUpdate: { id: 0, date: moment().toDate(), content: '' },
+    };
+  };
+
+  const testData = {
+    id: 5,
+    content: 'Sample content',
+    date: new Date('2025-08-01T00:00:00Z'),
+  };
+
+  it('dispatches createCourseUpdateQuery when requestType is add_new_update', () => {
+    const formattedDate = moment(testData.date).format(COMMA_SEPARATED_DATE_FORMAT);
+    createCourseUpdateQuery.mockReturnValue('mockCreateAction');
+
+    const context = getMockHookContext(REQUEST_TYPES.add_new_update);
+    const submitFn = (data) => {
+      const date = moment(data.date).format(COMMA_SEPARATED_DATE_FORMAT);
+      const action = createCourseUpdateQuery(context.courseId, {
+        date,
+        content: data.content,
+      });
+      context.closeUpdateForm();
+      context.setCurrentUpdate(context.initialUpdate);
+      context.dispatch(action);
+    };
+
+    submitFn(testData);
+
+    expect(createCourseUpdateQuery).toHaveBeenCalledWith(courseId, {
+      date: formattedDate,
+      content: 'Sample content',
+    });
+    expect(dispatchMock).toHaveBeenCalledWith('mockCreateAction');
+    expect(closeUpdateFormMock).toHaveBeenCalled();
+    expect(setCurrentUpdateMock).toHaveBeenCalledWith(expect.objectContaining({ id: 0 }));
+  });
+
+  it('dispatches editCourseUpdateQuery when requestType is edit_update', () => {
+    const formattedDate = moment(testData.date).format(COMMA_SEPARATED_DATE_FORMAT);
+    editCourseUpdateQuery.mockReturnValue('mockEditAction');
+
+    const context = getMockHookContext(REQUEST_TYPES.edit_update);
+    const submitFn = (data) => {
+      const date = moment(data.date).format(COMMA_SEPARATED_DATE_FORMAT);
+      const action = editCourseUpdateQuery(context.courseId, {
+        id: data.id,
+        date,
+        content: data.content,
+      });
+      context.closeUpdateForm();
+      context.setCurrentUpdate(context.initialUpdate);
+      context.dispatch(action);
+    };
+
+    submitFn(testData);
+
+    expect(editCourseUpdateQuery).toHaveBeenCalledWith(courseId, {
+      id: 5,
+      date: formattedDate,
+      content: 'Sample content',
+    });
+    expect(dispatchMock).toHaveBeenCalledWith('mockEditAction');
+    expect(closeUpdateFormMock).toHaveBeenCalled();
+    expect(setCurrentUpdateMock).toHaveBeenCalledWith(expect.objectContaining({ id: 0 }));
+  });
+
+  it('dispatches editCourseHandoutsQuery when requestType is edit_handouts', () => {
+    editCourseHandoutsQuery.mockReturnValue('mockHandoutAction');
+
+    const context = getMockHookContext(REQUEST_TYPES.edit_handouts);
+    const submitFn = (data) => {
+      const formatted = {
+        ...data,
+        date: moment(data.date).format(COMMA_SEPARATED_DATE_FORMAT),
+        data: data.data || '',
+      };
+      const action = editCourseHandoutsQuery(context.courseId, formatted);
+      context.closeUpdateForm();
+      context.setCurrentUpdate(context.initialUpdate);
+      context.dispatch(action);
+    };
+
+    submitFn(testData);
+
+    expect(editCourseHandoutsQuery).toHaveBeenCalledWith(courseId, expect.objectContaining({
+      date: expect.any(String),
+      content: 'Sample content',
+    }));
+    expect(dispatchMock).toHaveBeenCalledWith('mockHandoutAction');
+    expect(closeUpdateFormMock).toHaveBeenCalled();
+    expect(setCurrentUpdateMock).toHaveBeenCalledWith(expect.objectContaining({ id: 0 }));
+  });
+  it('extracts date without formatting for internal logic', () => {
+    getMockHookContext(REQUEST_TYPES.edit_update);
+
+    const submitFn = (data) => {
+      const dateWithoutTimezone = data.date;
+      expect(dateWithoutTimezone).toEqual(new Date('2025-08-01T00:00:00Z'));
+    };
+
+    submitFn(testData);
+  });
+});