MUI & slotProps

What are they and how do they work?

For the better part of the last few months, I was working on a file that was not written by me. The file was a customized MUI Dialog that contained two DatePickers and every time the value of one of the Date Pickers changed, the calendar would flash in the upper left hand corner of the screen and abruptly close.

I recognized this behavior from prior debugging exercises and realized that the DatePicker was losing it’s anchor element, hence the sudden flash to the top left corner. But, what I couldn’t figure out is why.

Here’s a look at the initial code:

      <DatePicker

label="Date"

slots={{ textField: props => <ValidTextField {...props} error={error?.date} /> }}

value={date}

onChange={newVal => setCalendar({ ...calendar, date: newVal })}

       />

The state was setting correctly, the component was rendering correctly, the error was showing as expected … so what in the world was going on.

After plentiful google searches along the line of: “date picker dialog mui flash top left corner”, I was starting to pull my hair out UNTIL I came across this github issue that stated: The slots receive components, not render function. Passing a render function like that will cause the field to remount of every render, which may be causing your problem.

Viola, that was my problem.

Here is my final code after recognizing what was going wrong:

<DatePicker

label="Date"

slots={{ textField: ValidTextField }}

slotProps={{ textField: { error: error?.date } }}

value={date}

onChange={newVal => setCalendar({ ...calendar, date: newVal })}

/>

If you aren’t familiar with slots or slotProps, here’s a brief explanation:

The slots prop is an object you can use to override interior subcomponents that are built into the base component. In my example, instead of rendering a basic textField (as is the default), I wanted to render my custom ValidTextField component. I then wanted to pass in props to my custom component, which is done using slotProps. This is an object that contains the props for all the slots within a component.

Seems pretty straightforward now that I understand it. Here’s the documentation if you’d like to take a deeper dive.

Happy coding!