[fields] Can not type into date picker after dismissing calendar picker

[c1oneman]

Steps to reproduce

Link to live example: https://stackblitz.com/edit/react-btjvds?file=Demo.tsx

Steps:

1. Click 'Calendar" icon in date picker
2. Click outside calendar to dismiss popover
3. Tab or click into the field again, the field will not populate the MM/DD/YYYY value attribute and you are unable to type into the date picker.

Tested on the latest 7.1.0 version, the stackblitz referenced in the docs.

Current behavior

When clicking into the date picker field, you are unable to type in the date if you have already opened the calendar popover.

Expected behavior

The value MM/DD/YYYY should populate in the date picker field after you click into the field.

Context

Users filling out a form may intentionally dismiss the calendar popover to type in a date themselves.

Your environment

npx @mui/envinfo Chrome Version 123.0.6312.87

    @emotion/react: ^11.4.1 => 11.10.5 
    @emotion/styled: ^11.11.0 => 11.11.0 
    @mui/base:  5.0.0-beta.1 
    @mui/core-downloads-tracker:  5.15.14 
    @mui/icons-material: ^5.6.2 => 5.11.16 
    @mui/lab: ^5.0.0-alpha.130 => 5.0.0-alpha.130 
    @mui/material: ^5.15.14 => 5.15.14 
    @mui/private-theming:  5.15.14 
    @mui/styled-engine:  5.15.14 
    @mui/system:  5.15.14 
    @mui/types:  7.2.14 
    @mui/utils:  5.15.14 
    @mui/x-date-pickers: 7.1.0 => 7.1.0 
    @types/react: ^18.2.15 => 18.2.15 
    react: ^18.2.0 => 18.2.0 
    react-dom: ^18.2.0 => 18.2.0 
    styled-components:  6.1.8 
    typescript: ^4.0.2 => 4.9.5 

Search keywords: date picker focus field can't type

[LukasTy]

Thank you for opening this issue, I can confirm that this is a regression.
The editing works after an additional blur -> focus sequence on the field.

[flaviendelangle]

From what I understand of the bug, it comes from the fact that the field do not necessarily re-render when focused, so the placeholder is still rendered instead of the value (which makes it impossible to select the right section.

One solution is the following diff:

diff --git a/packages/x-date-pickers/src/internals/hooks/useField/useFieldV6TextField.ts b/packages/x-date-pickers/src/internals/hooks/useField/useFieldV6TextField.ts
index 90ecb24fe..a157cc083 100644
--- a/packages/x-date-pickers/src/internals/hooks/useField/useFieldV6TextField.ts
+++ b/packages/x-date-pickers/src/internals/hooks/useField/useFieldV6TextField.ts
@@ -78,6 +78,7 @@ export const useFieldV6TextField: UseFieldTextField<false> = (params) => {
   const theme = useTheme();
   const isRTL = theme.direction === 'rtl';
   const focusTimeoutRef = React.useRef<ReturnType<typeof setTimeout>>();
+  const [, forceRender] = React.useState({});
 
   const {
     forwardedProps: {
@@ -225,12 +226,12 @@ export const useFieldV6TextField: UseFieldTextField<false> = (params) => {
     clearTimeout(focusTimeoutRef.current);
     focusTimeoutRef.current = setTimeout(() => {
       // The ref changed, the component got remounted, the focus event is no longer relevant.
-      if (!input || input !== inputRef.current) {
+      if (!input || input !== inputRef.current || readOnly) {
         return;
       }
 
-      if (activeSectionIndex != null || readOnly) {
-        return;
+      if (activeSectionIndex != null) {
+        forceRender({});
       }
 
       if (

Another, probably cleaner would be to investigate why activeSectionIndex is not reset to null when opening the picker.
If it was, then focusing back the field would set it again to 0, causing a re-render and probably solving the bug.

[github-actions]

⚠️ This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

@c1oneman: How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.