From 55ae3b1880dab6c7ddf7ace99db28cd603e66775 Mon Sep 17 00:00:00 2001
From: Stefan Dirix <sdirix@eclipsesource.com>
Date: Tue, 21 Jun 2022 17:55:02 +0200
Subject: [PATCH] Fix React Vanilla time renderer format

JSON Schema's time format is specified as 'HH:mm:ss'. The React Vanilla time renderer
is adjusted to store in this format by appending ':00' when necessary.
---
 packages/vanilla/src/cells/TimeCell.tsx        | 18 +++++++++++++++++-
 .../vanilla/test/renderers/TimeCell.test.tsx   |  2 +-
 2 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/packages/vanilla/src/cells/TimeCell.tsx b/packages/vanilla/src/cells/TimeCell.tsx
index f393ac8fd..42f7b4465 100644
--- a/packages/vanilla/src/cells/TimeCell.tsx
+++ b/packages/vanilla/src/cells/TimeCell.tsx
@@ -33,6 +33,21 @@ import { withJsonFormsCellProps } from '@jsonforms/react';
 import { VanillaRendererProps } from '../index';
 import { withVanillaCellProps } from '../util/index';
 
+/**
+ * AJV 'time' format expects HH:mm:ss while <input type='time'> only returns HH:mm.
+ * Therefore we append ':00' when the seconds are missing.
+ */
+const appendSecondsIfNecessary = (value: unknown) => {
+  if (typeof value === 'string') {
+    const splitValue = value.split(':');
+    if (splitValue.length === 2) {
+      splitValue.push('00');
+    }
+    return splitValue.join(':');
+  }
+  return value;
+}
+
 export const TimeCell = (props: CellProps & VanillaRendererProps) => {
   const { data, className, id, enabled, uischema, path, handleChange } = props;
 
@@ -40,7 +55,7 @@ export const TimeCell = (props: CellProps & VanillaRendererProps) => {
     <input
       type='time'
       value={data || ''}
-      onChange={ev => handleChange(path, ev.target.value)}
+      onChange={ev => handleChange(path, appendSecondsIfNecessary(ev.target.value))}
       className={className}
       id={id}
       disabled={!enabled}
@@ -48,6 +63,7 @@ export const TimeCell = (props: CellProps & VanillaRendererProps) => {
     />
   );
 };
+
 /**
  * Default tester for date controls.
  * @type {RankedTester}
diff --git a/packages/vanilla/test/renderers/TimeCell.test.tsx b/packages/vanilla/test/renderers/TimeCell.test.tsx
index 24b1792ac..870eca35d 100644
--- a/packages/vanilla/test/renderers/TimeCell.test.tsx
+++ b/packages/vanilla/test/renderers/TimeCell.test.tsx
@@ -259,7 +259,7 @@ describe('Time cell', () => {
     const input = wrapper.find('input');
     input.simulate('change', { target: { value: '20:15' } });
     wrapper.update();
-    expect(onChangeData.data.foo).toBe('20:15');
+    expect(onChangeData.data.foo).toBe('20:15:00');
   });
 
   test('update via action', () => {