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

package.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",

src/course-outline/CourseOutline.test.tsx

@@ -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-updates/CourseUpdates.test.jsx

@@ -389,5 +389,38 @@ describe('<CourseUpdates />', () => {
       expect(getByText(courseHandoutsMock.data)).toBeVisible();
       expect(getByText(messages.savingHandoutsErrorDescription.defaultMessage));
     });
+
+    it('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/hooks.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 {
@@ -27,7 +26,7 @@ const useCourseUpdates = ({ courseId }) => {
 
   const courseUpdates = useSelector(getCourseUpdates);
   const courseHandouts = useSelector(getCourseHandouts);
-
+  /* istanbul ignore next */
   const courseUpdatesInitialValues = requestType === REQUEST_TYPES.edit_handouts
     ? courseHandouts
     : currentUpdate;
@@ -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),
@@ -83,7 +82,6 @@ const useCourseUpdates = ({ courseId }) => {
 
   const handleDeleteUpdateSubmit = () => {
     const { id } = currentUpdate;
-
     dispatch(deleteCourseUpdateQuery(courseId, id));
     setCurrentUpdate(initialUpdate);
     closeDeleteModal();