mui / mui-x

MUI X: Build complex and data-rich applications using a growing list of advanced React components, like the Data Grid, Date and Time Pickers, Charts, and more!
https://mui.com/x/
4.12k stars 1.28k forks source link

[pickers] Is there a way to control the step size sections other than minutes for the field components #13732

Open xxKeefer opened 3 months ago

xxKeefer commented 3 months ago

The problem in depth

i can see the prop for minutesStep for https://next.mui.com/x/api/date-pickers/single-input-date-time-range-field/ but i want to control the step size for the other sections, specifically the seconds section. Is there a way to do that?

Your environment

`npx @mui/envinfo` ``` System: OS: Windows 10 10.0.19045 Binaries: Node: 20.9.0 - C:\Program Files\nodejs\node.EXE npm: 10.1.0 - C:\Program Files\nodejs\npm.CMD pnpm: 8.10.5 - ~\AppData\Roaming\npm\pnpm.CMD Browsers: Chrome: Not Found Edge: Chromium (126.0.2592.87) npmPackages: react: ^18.3.1 => 18.3.1 react-dom: ^18.3.1 => 18.3.1 ```

Search keywords: mui-x-date-picker field-components Order ID: 89424

LukasTy commented 3 months ago

Hello, @xxKeefer. Thank you for creating this issue. πŸ™ The minutesStep prop is somewhat of a legacy thing that we could consider for deprecation. The following behavior for field steps is implemented, hence, a less granular way of stepping is possible with PageUp and PageDown.

To better understand the use case, could you provide a bit more information about your requirement? What specific configuration do you need and why? πŸ€”

P.S. The Picker (DigitalClock) components support a timeSteps prop to fine-tune the steps generated in the view.

We could consider using timeSteps to control both the generated view as well as the field stepping behavior. The only problem and unknown is the a11y questionβ€”I'm not sure if this wouldn't be a problem for screen reader users, where they would get a bit of unexpected behavior being used to regular stepping. πŸ€”

xxKeefer commented 2 months ago

I think you are right with the a11y issues, it's not something my team considered. We are producing a set of reporting dashboard to display traffic data. the data is aggregated on 15min, 5min, 1min and 20sec time windows. We allow our users to seek through the data of time and want to step in those increments.

Our user base is a kind of small targeted set of users that are mostly traffic control people, i don't think we have considered the a11y of it as much because it is unlikely our users will need the use of a11y tools.

Even considering that it might be less than optimal for a11y this is something we will probably want to override. I've tried to provide new functions to the various onKey props but it doesn't seem to override the default behavior.

In this demo i have tried to just override the function to do a noop but i hasn't changed any behavior. Am i missing something?

LukasTy commented 2 months ago

In this demo i have tried to just override the function to do a noop but i hasn't changed any behavior. Am i missing something?

Your sandbox is probably private, I can't access it.

Even considering that it might be less than optimal for a11y this is something we will probably want to override. I've tried to provide new functions to the various onKey props but it doesn't seem to override the default behavior.

Thank you for sharing more information about your use case. πŸ™ We could add the option for the field component to use timeSteps for the arrow editing. We'd only be in an interesting spot regarding the PageUp and PageDown navigation as it might no longer make sense. 🀷

I'm adding this issue to our grooming board to discuss a solution. πŸ˜‰

xxKeefer commented 2 months ago

You're right sorry about that forgot to change the perms. the demo should be unlisted now.

Yeah I can see how the PageUp and PageDown stepping by five might not make sense with a step size prop specified. Perhaps if a step size is specified, both the ArrowUp/ArrowDown and PageUp/PageDown would use the specified step size? I'm not a a11y expert though. I'll leave it with you guys then. Keen to hear the outcome.

LukasTy commented 2 months ago

You're right sorry about that forgot to change the perms. the demo should be unlisted now.

I'm still getting a 404 error. πŸ€”

Screenshot 2024-07-09 at 08 54 16
xxKeefer commented 2 months ago

🀦🏻 Sorry for the time waste, i didn't hit the move sandbox / confirm unlisted button. I have verified with incognito mode now >.<