From 1cc0ffff1b931e375cf7b82b4fd02334bd06b1aa Mon Sep 17 00:00:00 2001
From: SilviaAmAm <silvia@maykinmedia.nl>
Date: Thu, 7 Dec 2023 17:23:46 +0100
Subject: [PATCH 1/2] :white_check_mark: [open-formulieren/open-forms#3647]
 Test not setting invalid time to string 'invalid date'

---
 src/formio/components/TimeField.spec.js | 48 +++++++++++++++++++++++++
 1 file changed, 48 insertions(+)
 create mode 100644 src/formio/components/TimeField.spec.js

diff --git a/src/formio/components/TimeField.spec.js b/src/formio/components/TimeField.spec.js
new file mode 100644
index 000000000..9aee5345b
--- /dev/null
+++ b/src/formio/components/TimeField.spec.js
@@ -0,0 +1,48 @@
+import {screen, waitFor} from '@testing-library/dom';
+import userEvent from '@testing-library/user-event';
+import _ from 'lodash';
+import {Formio} from 'react-formio';
+
+import OpenFormsModule from 'formio/module';
+
+// Use our custom components
+Formio.use(OpenFormsModule);
+
+const phoneForm = {
+  type: 'form',
+  components: [
+    {
+      key: 'time',
+      type: 'time',
+      input: true,
+      label: 'Time',
+      inputType: 'text',
+    },
+  ],
+};
+
+const renderForm = async () => {
+  let formJSON = _.cloneDeep(phoneForm);
+  const container = document.createElement('div');
+  document.body.appendChild(container);
+  const form = await Formio.createForm(container, formJSON);
+  return {form, container};
+};
+
+describe('The time component', () => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  test('Time component with invalid time', async () => {
+    const user = userEvent.setup({delay: 50});
+    const {form} = await renderForm();
+
+    const input = screen.getByLabelText('Time');
+    expect(input).toBeVisible();
+    await user.type(input, '25:00');
+    expect(input).toHaveDisplayValue('25:00');
+
+    expect(form.isValid()).toBe(false);
+  });
+});

From b4d8cf519c6b3dab1e466f62707164ba5ffd97ec Mon Sep 17 00:00:00 2001
From: SilviaAmAm <silvia@maykinmedia.nl>
Date: Thu, 7 Dec 2023 15:01:49 +0100
Subject: [PATCH 2/2] :adhesive_bandage: [open-formulieren/open-forms#3647]
 Prevent methods to return 'Invalid date' when parsing an invalid time

---
 src/formio/components/TimeField.js | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/src/formio/components/TimeField.js b/src/formio/components/TimeField.js
index f1ab35e06..bcf37a46c 100644
--- a/src/formio/components/TimeField.js
+++ b/src/formio/components/TimeField.js
@@ -29,6 +29,20 @@ class TimeField extends Time {
     ].join(' ');
     return info;
   }
+
+  getStringAsValue(value) {
+    const result = super.getStringAsValue(value);
+    if (result === 'Invalid date') return value;
+
+    return result;
+  }
+
+  getValueAsString(value) {
+    const result = super.getValueAsString(value);
+    if (result === 'Invalid date') return value;
+
+    return result;
+  }
 }
 
 export default TimeField;