[pickers] DatePicker Error - Cannot read properties of null (reading 'selectionStart')

[brandong954]

Steps to reproduce

Steps:

1. Add any htmlInput override for MuiTextField slotProps within createTheme():

let theme = createTheme({
  components: {
    MuiTextField: {
      defaultProps: {
        slotProps: {
          htmlInput: {
            sx: {
              margin: "10px 0",
            },
          }
        },
      },
    },
  },
});

2. Add a DatePicker component to the application.
3. Click on the input text field of the date picker.

Current behavior

The following runtime error is presented when replicating on desktop (haven't tried mobile):

Uncaught TypeError: Cannot read properties of null (reading 'selectionStart')
    at syncSelectionFromDOM (useFieldV6TextField.js:142:1)
    at useFieldV6TextField.js:185:1
    at useEventCallback.js:18:1
    at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
    at Sl.dtAWF [as aWF] (745a23c5b80d9e64_complete.js:265:226)
    at Qb.dispatchWrapper (745a23c5b80d9e64_complete.js:424:156)
    at z.dispatchEvent (745a23c5b80d9e64_complete.js:410:187)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)
    at invokeGuardedCallback (react-dom.development.js:4277:1)
    at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:4291:1)

Expected behavior

Able to click on the date picker input without the application crashing.

Context

Should be able to override the htmlInput slot prop for TextField at the theme level without negatively affecting DatePicker input.

Luckily, I was able to replace my htmlInput slotProp with the input slotProp to get things working.

Your environment

npx @mui/envinfo

  Browsers:
    Microsoft Edge
      Version 129.0.2792.52 (Official build) (arm64)
    Google Chrome
      Version 128.0.6613.139 (Official Build) (arm64)
  System:
    OS: Linux 5.15 Debian GNU/Linux 12 (bookworm) 12 (bookworm)
  Binaries:
    Node: 22.9.0 - /usr/local/bin/node
    npm: 10.8.3 - /usr/local/bin/npm
    pnpm: Not Found
  Browsers:
    Chrome: Not Found
  npmPackages:
    @emotion/react: ^11.13.0 => 11.13.3
    @emotion/styled: ^11.13.0 => 11.13.0
    @mui/core-downloads-tracker:  6.1.0
    @mui/icons-material: ^6.1.0 => 6.1.0
    @mui/material: ^6.1.0 => 6.1.0
    @mui/private-theming:  6.1.0
    @mui/styled-engine:  6.1.0
    @mui/system:  6.1.0
    @mui/types:  7.2.16
    @mui/utils:  6.1.0
    @mui/x-date-pickers: ^7.17.0 => 7.17.0
    @mui/x-internals:  7.17.0
    @types/react:  18.3.7
    react: ^18.3.1 => 18.3.1
    react-dom: ^18.3.1 => 18.3.1

Search keywords: DatePicker selectionStart

[michelengelen]

To help us diagnose the issue efficiently, could you provide a stripped-down reproduction test case using the latest version? A live example would be fantastic! ✨

For your convenience, our documentation offers templates and guides on creating targeted examples: Support - Bug reproduction

Just a friendly reminder: clean, functional code with minimal dependencies is most helpful. Complex code can make it tougher to pinpoint the exact issue. Sometimes, simply going through the process of creating a minimal reproduction can even clarify the problem itself!

Thanks for your understanding! 🙇🏼

[brandong954]

Sorry, I've provided everything I can for now.

[michelengelen]

Without a reproduction its hard for us to tell you whats wrong with your implementation.
From the provided code I can already tell you that slotProps is not a valid property for MuiTextField.defaultProps.
Considering this we are not able to pinpoint the problem, as even with a custom theme it works just fine for me.

[brandong954]

Weird, not sure how my theme overrides are working then, but shouldn't slotProps be a valid option for MuiTextField.defaultProps since slotProps is a prop for TextField?

Side note, the MUI 5 -> 6 migration tools actually reconfigured my theme with the slotProps property for MuiTextField.defaultProps: