[TextField] type="time" does not render 00 seconds

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

When a value of ‘00:00:00’ is passed to <TextField type='time'/>, the seconds are not rendered.

The seconds are rendered for ‘00:00:01’

Expected behavior 🤔

Seconds selector is rendered for <TextField type=‘time’ value={‘00:00:00’}/>

Steps to reproduce 🕹

Steps:

1. Import TextField component
2. Render TextFieldwith props: value=‘00:00:00’, type=‘time’
3. Observe that the TextFieldwith picker is not rendered

code sand box: https://codesandbox.io/s/mui-time-textfield-pg2pqn?file=/src/App.js

Context 🔦

I am creating an application to manage GTFS data. The specification requires that stop times be given in the form hh:mm:ss In one of the forms I would like the starting value for the stop time to be 00:00:00. The TextField component does not render the seconds part of the string. What makes matters worse is that when a value is selected the value changes to hh:mm, which does not conform to the GTFS specification.

Your environment 🌎

`npx @mui/envinfo`

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

[hbjORbj]

@abhinav-22-tech

Hey, sure, no problem 👍

[hbjORbj]

For the date/time input types, step is expressed in seconds, with the default step being 60 seconds. The step scale factor is 1000 (which converts the seconds to milliseconds, as used in other algorithms).

Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-step

Yes, it indeed doesn’t seem like a bug.

InputProps: Attributes applied to the input element.

In the API doc of TextField, we provide the link for the possible attributes of the input element, so I think this was more of a support question in fact. I added the relevant label.

Here is a working solution: https://codesandbox.io/s/mui-time-textfield-forked-01dk6i?file=/src/App.js