[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:

[michelengelen]

It is ... but I tested this on the current release ... which version are you using atm?

[brandong954]

"@mui/icons-material": "^6.1.0",
"@mui/material": "^6.1.0",
"@mui/x-date-pickers": "^7.17.0",

[brandong954]

Similar issue also occurring with Autocomplete.

[sai6855]

@brandong954 can you set @mui/material version as "https://pkg.csb.dev/mui/material-ui/commit/aeadff06/@mui/material" and try again? looks like this issue should be solved by https://github.com/mui/material-ui/pull/43606

[brandong954]

Sorry, I'm a noob still with package.json nuances, but how can I tell it to use https://pkg.csb.dev/mui/material-ui/commit/aeadff06/@mui/material for @mui/material?

However, after switching defaultProps to styleOverrides within my theme, everything is working as intended. Seems like both should be valid approaches though, and perhaps the latest updates make it possible.

[michelengelen]

Looks like the linked PR fixes that issue, so I did link it to this as well. Could you update to the new version once this gets released and report back?

---

As for the installation of specific commits or from a different source. You can find that information in the npm docs, but for this specific case it would require you to run:

npm i https://pkg.csb.dev/mui/material-ui/commit/aeadff06/@mui/material

... the result is that the package manager resolves @mui/material to the provided URL:

"@mui/material": "https://pkg.csb.dev/mui/material-ui/commit/aeadff06/@mui/material",

[DiegoAndai]

I'm not very familiar with the DatePicker's code, but what I think it's happening:

• DatePicker somewhere relies on setting the TextField's inputProps/slotProps.htmlInput prop
• By setting the default prop of the TextField's slotProps.htmlInput value, the above is overridden, breaking the DatePicker.

Makes me think we're missing the infrastructure to merge the slotProps from defaultProps correctly, this will also happen in the Autocomplete component, for example. It's related but not exactly the same as https://github.com/mui/material-ui/issues/43573.

This can indeed be fixed by https://github.com/mui/material-ui/pull/43606, but I don't think it's the best solution, because:

• It only solves it in the Textfield component, but this is an architecture issue that we might face with all components
• The root cause for the issues is not exactly the same.

Could we have someone from the @mui/x team debug this and confirm my theory? We can work on a proper solution if this is confirmed.

[GuysmoB]

Same problem for me when i tried to add my custom Textfield in the TimeField component

<TimeField
value={moment(slot.startTime, 'HH:mm')}
onChange={handleTimeChange(day, i, 'startTime')}
format='HH:mm'
ampm={false}
slots={{
 textField: (params) => ( <CRSTextField {...params} sx={{ width: rem(80), height: rem(40) }}    />  )
}}
/> 

This happen because I added some style in the inputProps field from CRSTextField. If i comment it, problem doesnt appear.