[TimeClock] The value does not update when ending the drag outside of the clock container

[ykss]

Steps to reproduce

Link to live example: (required) https://codesandbox.io/s/gallant-chebyshev-994655

Steps:

1. Open the timepicker.
2. After selecting the hour, the minute selection screen appears.
3. Drag the minute hand to move it to select the time, and tap OK.
4. Verify that the value is not reflected.

2023-10-19.1.35.45.mov

Current behavior

1. Open the timepicker.
2. After selecting the hour, the minute selection screen appears.
3. Drag the minute hand to move it to select the time, and tap OK.
4. Verify that the value is not reflected.

Expected behavior

Dragging the minute hand to select a time also reflects the selected time.

Context

When dragging to select a time, the time is not reflected, which users perceive as a bug.

Your environment

npx @mui/envinfo

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

System: OS: macOS 13.2.1 Binaries: Node: 18.16.0 - ~/.nvm/versions/node/v18.16.0/bin/node Yarn: Not Found npm: 9.5.1 - ~/.nvm/versions/node/v18.16.0/bin/npm Browsers: Chrome: 118.0.5993.70 Edge: Not Found Safari: 16.3 npmPackages: @emotion/react: ^11.11.1 => 11.11.1 @emotion/styled: ^11.11.0 => 11.11.0 @mui/base: 5.0.0-beta.7 @mui/core-downloads-tracker: 5.14.0 @mui/material: ^5.14.0 => 5.14.0 @mui/private-theming: 5.13.7 @mui/styled-engine: 5.13.2 @mui/system: 5.14.0 @mui/types: 7.2.4 @mui/utils: 5.13.7 @mui/x-date-pickers: ^6.10.2 => 6.10.2 @types/react: ^18.0.15 => 18.2.14 react: ^18.2.0 => 18.2.0 react-dom: ^18.2.0 => 18.2.0 typescript: ^4.7.4 => 4.9.5

Search keywords: timepicker

[flaviendelangle]

I think the problem is that you drag the value outside of the clock.

Screencast.2023-10-19.08.35.06.mp4

We could probably improve the events to at least keep the last dragged element inside the clock.
I don't know if we can know the position to compute the value after that.