MMT-3960: Resetting millisecond part only when date time is selected.

static/src/js/components/CustomDateTimeWidget/CustomDateTimeWidget.jsx

@@ -46,6 +46,10 @@ const CustomDateTimeWidget = ({
 }) => {
   const [showCalender, setShowCalender] = useState(false)
   const datetimeScrollRef = useRef(null)
+  // Variable to flag method of input: selected or typed.
+  // We can't store as state variable because it gets updated
+  // only after some delay.
+  let dateInputMethod = 'selected'
 
   const { description } = schema
 
@@ -89,14 +93,22 @@ const CustomDateTimeWidget = ({
   }
 
   const handleChange = (newDate) => {
-    // The picket widget has a bug where it is not setting millis to 0 when selecting a time.
-    newDate.setMilliseconds(0)
+    // The picker widget has a bug where it is not setting the ms. to 0 when a user selects a time.
+    // We are working around this bug by setting the ms to 0 only if the user selects/chooses
+    // a time from the widget. If they type in a date/time or paste in a date/time should ,
+    // we should not perform this reset as we should keep whatever ms they user enters.
+    if (!value && dateInputMethod !== 'typed') newDate.setMilliseconds(0)
     const formattedDateTime = fromZonedTime(newDate, 'GMT').toISOString()
     onChange(formattedDateTime)
 
     handleBlur()
   }
 
+  const handleDateInput = () => {
+    // Saves the input method for handleChange
+    dateInputMethod = 'typed'
+  }
+
   return (
     <CustomWidgetWrapper
       description={description}
@@ -109,16 +121,17 @@ const CustomDateTimeWidget = ({
       <DatePicker
         className="w-100 p-2 form-control"
         disabled={disabled}
-        dateFormat="yyyy-MM-dd'T'HH:mm:ss'Z'"
+        dateFormat="yyyy-MM-dd'T'HH:mm:ss.SSS'Z'"
         dropdownMode="select"
         id={id}
         locale="en-GB" // Use the UK locale, located in the Greenwich Mean Time (GMT) zone,
         onBlur={handleBlur}
         onChange={handleChange}
+        onChangeRaw={() => handleDateInput()}
         onFocus={handleFocus}
         open={showCalender}
         peekNextMonth
-        placeholderText="YYYY-MM-DDTHH:MM:SSZ"
+        placeholderText="YYYY-MM-DDTHH:MM:SS.SSSZ"
         wrapperClassName="d-block"
         selected={fieldValue}
         showMonthDropdown

static/src/js/components/CustomDateTimeWidget/__tests__/CustomDateTimeWidget.test.jsx

@@ -77,7 +77,7 @@ describe('CustomDateTimeWidget', () => {
     test('shows the field description', async () => {
       setup()
 
-      const field = await screen.findByPlaceholderText('YYYY-MM-DDTHH:MM:SSZ')
+      const field = await screen.findByPlaceholderText('YYYY-MM-DDTHH:MM:SS.SSSZ')
 
       await act(async () => {
         field.focus()
@@ -96,7 +96,7 @@ describe('CustomDateTimeWidget', () => {
     test('blurs the field', async () => {
       const { props } = setup()
 
-      const field = await screen.findByPlaceholderText('YYYY-MM-DDTHH:MM:SSZ')
+      const field = await screen.findByPlaceholderText('YYYY-MM-DDTHH:MM:SS.SSSZ')
 
       await act(async () => {
         field.focus()
@@ -115,7 +115,7 @@ describe('CustomDateTimeWidget', () => {
     test('calls onChange', async () => {
       const { props, user } = setup()
 
-      const field = await screen.findByPlaceholderText('YYYY-MM-DDTHH:MM:SSZ')
+      const field = await screen.findByPlaceholderText('YYYY-MM-DDTHH:MM:SS.SSSZ')
 
       await user.type(field, '1')
 
@@ -165,21 +165,33 @@ describe('CustomDateTimeWidget', () => {
         value: '2023-12-05T00:00:00.000Z'
       })
 
-      const field = await screen.findByPlaceholderText('YYYY-MM-DDTHH:MM:SSZ')
+      const field = await screen.findByPlaceholderText('YYYY-MM-DDTHH:MM:SS.SSSZ')
 
-      expect(field).toHaveValue('2023-12-05T00:00:00Z')
+      expect(field).toHaveValue('2023-12-05T00:00:00.000Z')
     })
   })
 
   describe('When a date has a specific time in the form', () => {
     test('shows the date and time', async () => {
       setup({
-        value: '2023-12-05T16:05:59.000Z'
+        value: '2023-12-05T16:05:59.090Z'
       })
 
-      const field = await screen.findByPlaceholderText('YYYY-MM-DDTHH:MM:SSZ')
+      const field = await screen.findByPlaceholderText('YYYY-MM-DDTHH:MM:SS.SSSZ')
 
-      expect(field).toHaveValue('2023-12-05T16:05:59Z')
+      expect(field).toHaveValue('2023-12-05T16:05:59.090Z')
+    })
+  })
+
+  describe('when the field is typed in', () => {
+    test('calls onChange', async () => {
+      const { props, user } = setup()
+
+      const field = await screen.findByPlaceholderText('YYYY-MM-DDTHH:MM:SS.SSSZ')
+
+      await user.type(field, '2025-01-02T03:20:15.999Z')
+
+      expect(props.onChange).toHaveBeenCalledWith('2025-01-02T03:20:15.999Z')
     })
   })
 })