Vue3 Vanilla Time & DateTime Renderer do not work as expected

[davewwww]

Describe the bug

Expectation:
I have a Date field (format=date), then I click on a day in the overlay and the day appears in the Input field and the overlay closes.

Actual situation:
If I have a Time/Datetime field (format=time/datetime) and I click on a time in the overlay, then the time appears in the Input field. When I want to close the window with a "click-out-side", the input field becomes empty again.

See here:
https://codesandbox.io/s/dazzling-water-tds7xh

is this behavior intentional?

the solution to the problem would be to use a v-model instead of a computed value in the datetime renderer.

Expected behavior

I have a Date field (format=date), then I click on a day in the overlay and the day appears in the Input field and the overlay closes.

Steps to reproduce the issue

1. Go to: https://tds7xh.csb.app/
2. Click on clock icon
3. Select a time
4. close the window with a click-out-side

Screenshots

No response

In which browser are you experiencing the issue?

Google Chrome 114.0.5735.124

Which Version of JSON Forms are you using?

v3.*

Framework

Vue 3

RendererSet

Vanilla

Additional context

I have fixed that behavior with a custom renderer, but it would be good to know if this is intentional or if there is a reason why it was solved this way.

[sdirix]

Hi @davewwww, thanks for the report.

Sadly I can't reproduce the behavior, even when using the codesandbox you provided.

There is an issue with the time renderer which stores the time in an incompatible format to JSON Schema. But besides that everything seems working. I clicked once on each overlay and then once outside of the overlay.

Can you still reproduce the issue? If yes, can you also attach a video or GIF?

[davewwww]

jsonform.datepicker.issue.mp4

[davewwww]

if i change my browser language from german to english it works. very strange.

jsonform.datepicker.issue.en.mp4

[sdirix]

I see. We're using the browser native controls, so it seems that they behave differently depending on the locale. That is certainly unintended.

[LukasBoll]

For me this problem also occurred with english browser setting.
In the TimeControlRenderer the adaptTarget function gets called with an outdated value.
In the example below ich changed the time to 03:40, but 13:37 (the previous selected value) is passed as target.value.
So far, I couldn´t figure out, why.