[pickers] popup jumps to the top left after selection if custom TextField slot is given

[anthonyma94]

Steps to reproduce

Link to live example: (required)
Codesandbox

Steps:

1. Create a DateTimePicker with a custom TextField slot
2. Click the UI to change date

Current behavior

When using a custom TextField slot, the date selection box jumps to the top left after the first click.

Expected behavior

Date selection box should stay as is.

Context

No response

Your environment

npx @mui/envinfo

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

  System:
    OS: Linux 5.15 Debian GNU/Linux 11 (bullseye) 11 (bullseye)
  Binaries:
    Node: 20.2.0 - /usr/local/bin/node
    npm: 9.6.6 - /usr/local/bin/npm
    pnpm: 8.6.1 - /usr/local/share/npm-global/bin/pnpm
  Browsers:
    Chrome: Not Found
  npmPackages:
    @emotion/react: 11.11.1 => 11.11.1 
    @emotion/styled: 11.11.0 => 11.11.0 
    @mui/base:  5.0.0-alpha.116 
    @mui/core-downloads-tracker:  5.15.7 
    @mui/icons-material: ^5.14.18 => 5.15.7 
    @mui/lab: 5.0.0-alpha.118 => 5.0.0-alpha.118 
    @mui/material: ^5.14.18 => 5.15.7 
    @mui/private-theming:  5.15.7 
    @mui/styled-engine:  5.15.7 
    @mui/system:  5.15.7 
    @mui/types:  7.2.13 
    @mui/utils:  5.15.7 
    @mui/x-date-pickers: ^6.19.4 => 6.19.4 
    @types/react: 18.2.24 => 18.2.24 
    react: 18.2.0 => 18.2.0 
    react-dom: 18.2.0 => 18.2.0 
    typescript: 5.3.3 => 5.3.3 

Search keywords: slot, TextField, DateTimePicker

[michelengelen]

This happens because the dialog losses the ref. Using a custom field is not as easy as just passing in a different component. We do have examples on our docs on how to use custom fields.

The example with the JoyUI field should be a good guide to add a material TextField.

@LukasTy should we maybe add recipes for material as well?

[LukasTy]

@anthonyma94 Please remember to always pass a reference to the slots property instead of creating an inline component.
It will force the picker to be remounted after every change.

[github-actions]

⚠️ This issue has been closed.
If you have a similar problem, please open a new issue and provide details about your specific problem.
If you can provide additional information related to this topic that could help future readers, please feel free to leave a comment.

How did we do @anthonyma94?
Your experience with our support team matters to us. If you have a moment, please share your thoughts through our brief survey.