[pickers] Improve DOM event management on useField

[flaviendelangle]

• A continuation of [pickers] New unstable field components #5504
• Focus the clicked section even when the input is not currently focused
• Call the DOM events provided to the hook

https://deploy-preview-5901--material-ui-x.netlify.app/x/react-date-pickers/date-field/

[mui-bot]

These are the results for the performance tests:

Test case	Unit	Min	Max	Median	Mean	σ
Filter 100k rows	ms	410.3	723.2	625.7	582.1	133.644
Sort 100k rows	ms	602.6	1,188	1,188	968.1	199.765
Select 100k rows	ms	235.6	330	300.6	294.3	33.108
Deselect 100k rows	ms	155.9	363.2	227.9	253.9	75.302

Generated by 🚫 dangerJS against 2d7f0c9

[oliviertassinari]

I have quickly played with this problem. Applying this diff on HEAD seems to solve the problem too:

diff --git a/packages/x-date-pickers/src/internals/hooks/useField/useField.ts b/packages/x-date-pickers/src/internals/hooks/useField/useField.ts
index 0f5642aa0..3447f0a51 100644
--- a/packages/x-date-pickers/src/internals/hooks/useField/useField.ts
+++ b/packages/x-date-pickers/src/internals/hooks/useField/useField.ts
@@ -317,8 +317,13 @@ export const useField = <
   });

   const handleInputFocus = useEventCallback(() => {
-    // TODO: Avoid applying focus when focus is caused by a click
-    updateSelectedSections(0, state.sections.length - 1);
+    setTimeout(() => {
+      if (inputRef.current.selectionEnd - inputRef.current.selectionStart === 0) {
+        handleInputClick();
+      } else {
+        updateSelectedSections(0, state.sections.length - 1);
+      }
+    })
   });

   const handleInputBlur = useEventCallback(() => updateSelectedSections());

[LukasTy]

The current implementation introduces the following regression.
Click on section -> blur -> focus with tab -> arrow navigation does not work.
The same issue is not happening with the solution suggested by Olivier, which also looks more simple. 🤔
What do you think @flaviendelangle ?

Screen.Recording.2022-08-26.at.14.15.06.mov

[flaviendelangle]

@LukasTy I can implement it of course

[flaviendelangle]

Done

[flaviendelangle]

The approach we went for do not work on Android
I'll try to find a workaround later