[TimePicker] Issue typing seconds with AdapterDateFns using mask editing

[scottlamb]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

Link to live example: https://codesandbox.io/s/unruffled-galois-81owin

Steps:

1. Click on the time picker
2. Type 09280 (just one 0 at the end)

Current behavior 😯

It fills in a second zero, so if you're typing fast and want to enter the time 09:28:02 rather than 09:28:00, it ignores the 2.

Expected behavior 🤔

It allows you to type the full time.

Context 🔦

This was reported by one of my users: scottlamb/moonfire-nvr#256. In my software, we often want to snip clips of video to precise second boundaries, and this makes it awkward to do so.

I've noticed the behavior is dependent on the supplied dateAdapter. With AdapterDayJs, as in the unforked example from the docs, it works as I'd expected. With AdapterDateFns, I get the broken behavior.

Your environment 🌎

I'm using Chrome 109.0.5414.119 on macOS.

npx @mui/envinfo

  System:
    OS: macOS 13.2
  Binaries:
    Node: 18.14.0 - /opt/homebrew/bin/node
    Yarn: Not Found
    npm: 9.3.1 - /opt/homebrew/bin/npm
  Browsers:
    Chrome: 109.0.5414.119
    Edge: Not Found
    Firefox: 108.0.2
    Safari: 16.3
  npmPackages:
    @emotion/react: ^11.8.2 => 11.10.5 
    @emotion/styled: ^11.8.1 => 11.10.5 
    @mui/base:  5.0.0-alpha.117 
    @mui/core-downloads-tracker:  5.11.8 
    @mui/icons-material: ^5.10.6 => 5.11.0 
    @mui/lab: ^5.0.0-alpha.102 => 5.0.0-alpha.119 
    @mui/material: ^5.10.8 => 5.11.8 
    @mui/private-theming:  5.11.7 
    @mui/styled-engine:  5.11.8 
    @mui/system:  5.11.8 
    @mui/types:  7.2.3 
    @mui/utils:  5.11.7 
    @mui/x-date-pickers: ^5.0.3 => 5.0.18 
    @types/react: ^18.0.26 => 18.0.26 
    react: ^18.2.0 => 18.2.0 
    react-dom: ^18.2.0 => 18.2.0 
    typescript: ^4.9.4 => 4.9.4 

Order ID 💳 (optional)

No response

[LukasTy]

Thank you for opening this issue!
It's nice to see the components used in real-life projects! 🎉

The masked input has many edge case issues and is really hard to make perfect, that's why we and most other component libraries are ditching them for other approaches.
In v6 (already in beta) we introduced field components replacing the masked inputs, which provide superior keyboard support as well as avoid most if not all issues with masked inputs.
You can find documentation about the updated time picker or even consider using just the time field component.
We are not going to put any further effort into fixing masked input edge cases and trust that the new approach will be a great replacement for it.
Would you be willing to try it out and let us know if you notice any issues?
Here is an example using the latest v6 release.

[scottlamb]

Thanks for the pointers and explanation! Yes, I'll move to the v6 beta with the new approach and report any problems I have separately. Shall we close this issue then?

[LukasTy]

Thanks for the pointers and explanation! Yes, I'll move to the v6 beta with the new approach and report any problems I have separately. Shall we close this issue then?

Thank you for your understanding. 🙏

I'm closing it as it seems to resolve the original question. If you find any issues with the "fields" approach, feel free to open a different issue. 👍