Time format render doesn't support seconds yet schema validation on time format expects it

[kairos0ne]

Describe the bug

Basically the renderer for Vue doesn't support seconds in time but the ISO standard and so does schema validation require it

Expected behavior

The render should allow seconds selection and if none selected default to ":00"

[kairos0ne]

I think the html render just needs the step attribute step="2"

[sdirix]

Thanks for the report. Can you contribute the fix?

[kairos0ne]

Yeah np, however I have a question.

Do you want to simply add the attribute step="2" or do you want to add dynamically with an option ?

[kairos0ne]

I tried to push a fix but I'm not listed contributer...

if you change the TimeControlRenderer.vue it requires a 1 line change
:step="appliedOptions.step > 0 ? appliedOptions.step : undefined"

That way you can support both.

<template>
  <control-wrapper
    v-bind="controlWrapper"
    :styles="styles"
    :is-focused="isFocused"
    :applied-options="appliedOptions"
  >
    <input
      :id="control.id + '-input'"
      type="time"
      :step="appliedOptions.step > 0 ? appliedOptions.step : undefined"
      :class="styles.control.input"
      :value="control.data"
      :disabled="!control.enabled"
      :autofocus="appliedOptions.focus"
      :placeholder="appliedOptions.placeholder"
      @change="onChange"
      @focus="isFocused = true"
      @blur="isFocused = false"
    />
  </control-wrapper>
</template>

<script lang="ts">
import {
  ControlElement,
  JsonFormsRendererRegistryEntry,
  rankWith,
  isTimeControl,
} from '@jsonforms/core';
import { defineComponent } from 'vue';
import {
  rendererProps,
  useJsonFormsControl,
  RendererProps,
} from '../../config/jsonforms';
import { default as ControlWrapper } from './ControlWrapper.vue';
import { useVanillaControl } from '../util';

const controlRenderer = defineComponent({
  name: 'TimeControlRenderer',
  components: {
    ControlWrapper,
  },
  props: {
    ...rendererProps<ControlElement>(),
  },
  setup(props: RendererProps<ControlElement>) {
    return useVanillaControl(
      useJsonFormsControl(props),
      (target) => target.value || undefined
    );
  },
});

export default controlRenderer;

export const entry: JsonFormsRendererRegistryEntry = {
  renderer: controlRenderer,
  tester: rankWith(2, isTimeControl),
};
</script>

[kairos0ne]

here is the pull #2453

I left with the logic that if not supplied it will set 'undefined' which will produce the behaviour you have today. This means it will not break existing implementations but technically the default behavour should be to set it as step="2" and set undefined as a fallback if option "step":"undefined" is set. This is just my opinion as the default time picker in my opinion should be to set a valid ISO time.

Best
Scott