[Bug]: DateField hidden datetime-local input has no step, so granularity="second" values fail native form validation (stepMismatch) #3000

Environment

Development/Production OS: macOS 15.1
Node version: 22.18.0
Package manager: pnpm@10.28.2
Reka UI version: 2.10.3 (also reproduced on 2.11.0)
Vue version: 3.5.41
Nuxt version: 4.x (via @nuxt/ui 4.11.0 UInputDate)
Client OS: macOS 15.1
Browser: Chrome

Link to minimal reproduction

https://play.vuejs.org/#eNp9VU1v4zYQ/SsDooBsQJZsp9lFVcnxokWBHraH3UUvywLLSOOEiUSy5EiJa+i/F9SHTbdNDwKoeW8eH2dG1Il9MCbpWmQZy11ppSFwSK3ZcSUboy3BCX4SNapK2J8F4RfZIPRwsLqBaC8VoVWCpFailn9hlVaCMApyfc4vEuvqV2Vaii/vn7Sms5DFZ7FqZZio8JW+yPI5Bq0+6lYRVjFYPMTwIqh8PKd2rd+Pq1IrR9CJukUoPHGh8OVf1hfb9fZdDJtNDDfrGLY3Mdz+4J/lcpZopPp9Uvk/hXUM72PY3MawXcfwbnnx4OvR4XDe2Ulb18vAoqwkHScsis6IRdfWc06kNIFr7xtJhFU06At3VCUcWlX6ioNUzmBJiyWcuAIQL0LSuW6LpY+NwnLyEjhLhkrdJX+2aI+fscaStF1EA/MrHQ0WnPlekmxwVetS1Jz9EQ2a8wGSudhDkkcA7uDbEC04++4kLxv1nPnCBuFGKh90hCaIPiB9ILLyviVcRB6MljPto3SNb30RKI9GQrT/NjrJIBqPO53el/OgW1VFXPVcnYdqMVVxydUwWIvBbwyXcJ6OH8bOtyAnbEwtCHd+m/ygbQP7sU2JsdihooKzcyejSwc5243O8kp2vsUFZ0FDzjBAfvWRzFGAbuVq7eVP4PChQUUOes5CQqMrrAvOhkOEUNZItZpbM494SHiwQrW1sJKOBWcOS62qK4FH3dpVeSxrr7D9PsSUaHxQUBh0dByolXSmFscMDjW+/ggPwmSwNa8X6u6Sk19fFxfAn+2gbcGZJGxAqnMFwi0Bsmc8TqTECEv/QH3oLXgXMk8nGEjjiPd9YDG99njpWnrVtrnZaSW7eX3fEmkF0+c1jgZnu8/DIk9HeBys1E/WuDS734JBzry38x3S93lqZtqnYeoGwjSAM5ynwdiymI237KoRJnlyWrGMDTcInwDHWTbeKT7W+UHJgLNHIuOyNC0rlTy5CmvZ2UQhpco0adfi/ia5TbbbtJKO/HuCrlndW/3i0CZPjrN4lnzjx3G9DbomcY/pG9z9TbJZJ+tAdPqJ/KfIhO23yWaTrO/wdZCsi67F+E0zXrgfbgvW/w1pYWEH

Steps to reproduce

1. Render a DateFieldRoot inside a <form> with granularity="second" and a minValue whose seconds differ from the model value's seconds, e.g. minValue = 2026-10-07T15:20:06, modelValue = 2026-11-30T23:59:59.
2. Submit the form.

The reproduction prints the hidden native input's value, min, step and validity.stepMismatch and shows whether the submit handler ran.

Describe the bug

Since #2549 (v2.9.4), DateFieldRoot renders the hidden native input as type="datetime-local". With granularity="second", it puts seconds into value / min / max, but it does not set a step attribute.

Without step, the browser uses the default step for datetime-local (60 seconds, with min as the step base, or 0 when there is no min). Any value whose seconds aren't aligned to that base is stepMismatch. Because the hidden input is not readonly or disabled, it takes part in constraint validation, so the browser blocks the form submission with its native "Please enter a valid value. The two nearest valid values are …" message.

In the reproduction: value="2026-11-30T23:59:59" min="2026-10-07T15:20:06" step=null stepMismatch=true, and the submit handler is never called. Without minValue, any value whose seconds aren't 00 fails the same way.

The step prop (DateStep) only controls the segment increment and is not forwarded to the hidden input, so users can't work around this through props.

Expected behavior

With granularity="second", the hidden input should get step="1" so that every second-precision value passes constraint validation. Other granularities already drop seconds from value / min / max, so they don't need it.

A possible fix in DateFieldRoot.vue:

<VisuallyHidden
  ...
  :max="inputMaxValue"
  :min="inputMinValue"
  :step="inferredGranularity === 'second' ? 1 : undefined"
/>

We are currently applying this change locally with pnpm patch, and it fixes the issue.

Context & Screenshots (if applicable)

We hit this in production through Nuxt UI's UInputDate with granularity="second" and a min-value. It only appeared after upgrading from 2.7.0, where the hidden input was always type="date".