[pickers] Datepicker flickers with custom textfield component

[vishal-kadmos]

Order ID or Support key 💳 (optional)

52198

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

The problem in depth 🔍

Observed two issues with datepicker + custom Text field component

#1. If with custom text field components, input props are not provided (see TODO comment in code sandbox attached), placement for datepicker popup does not align with anchored input element

#2. If I try to fix above popper placement issue with input props, datepicker rerenders/flickers
Screencast 2023-06-30 08-51-48.webm

here is attached code sandbox reproducible:

https://codesandbox.io/s/mui-datepicker-with-custom-textfield-issues-t8tr9w?file=/src/Datepicker.tsx

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.4
  Binaries:
    Node: 20.0.0 - ~/.nvm/versions/node/v20.0.0/bin/node
    Yarn: 1.22.19 - ~/.yarn/bin/yarn
    npm: 9.6.3 - ~/projects/kadmos/customer-portal/node_modules/.bin/npm
  Browsers:
    Chrome: 114.0.5735.198
    Edge: 113.0.1774.35
    Safari: 16.5
  npmPackages:
    @emotion/react: ^11.11.0 => 11.11.0
    @emotion/styled: ^11.11.0 => 11.11.0
    @mui/base:  5.0.0-beta.3
    @mui/core-downloads-tracker:  5.13.3
    @mui/material: ^5.13.3 => 5.13.3
    @mui/private-theming:  5.13.1
    @mui/styled-engine:  5.13.2
    @mui/styled-engine-sc: ^5.12.0 => 5.12.0
    @mui/system:  5.13.2
    @mui/types:  7.2.4
    @mui/utils:  5.13.1
    @mui/x-data-grid:  6.5.0
    @mui/x-data-grid-pro: ^6.5.0 => 6.5.0
    @mui/x-date-pickers:  6.5.0
    @mui/x-date-pickers-pro: ^6.5.0 => 6.5.0
    @mui/x-license-pro:  6.0.4
    @types/react: ^18.2.7 => 18.2.7
    react: ^18.2.0 => 18.2.0
    react-dom: ^18.2.0 => 18.2.0
    styled-components: ^5.3.11 => 5.3.11
    typescript: ^5.0.4 => 5.0.4

node v18.4.0
browser: Chrome latest

"@emotion/react": "^11.11.0",
"@emotion/styled": "^11.11.0",
"@mui/material": "^5.13.3",
"@mui/styled-engine-sc": "^5.12.0",
"@mui/x-date-pickers-pro": "^6.5.0",

[flaviendelangle]

Hi,

Not sure it will solve your problem, but you are defining your WrappedMyTextField inside the DatePicker component.
So everytime DatePicker re-renders, a new WrappedMyTextField component is created and React remounts it's instance.

You should never create components inside another one like that, it will always lead to unwanted behavior.

[vishal-kadmos]

Agree. but this does not solve core issue. Any help?

[flaviendelangle]

The InputProps contains the ref used to place the popper.
If you don't pass it to the TextField, it is normal that the placement is wrong.
If you do pass it to the TextField, I don't see any flickering if the component is correctly defined.
Updated example

[github-actions]

Since the issue is missing key information and has been inactive for 7 days, it has been automatically closed. If you wish to see the issue reopened, please provide the missing information.