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.

Author: sdirix

packages/vanilla/src/cells/TimeCell.tsx

@@ -33,21 +33,37 @@ 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;
 
   return (
     <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}
       autoFocus={uischema.options && uischema.options.focus}
     />
   );
 };
+
 /**
  * Default tester for date controls.
  * @type {RankedTester}

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', () => {