[pickers] Refactor `slots` and `slotProps` propagation strategy #18867

LukasTy · 2025-07-21T14:34:54Z

Noticed a problem with inputAdornment resolution while exploring #17738 and checking https://mui.com/x/react-date-pickers/custom-opening-button/#add-an-icon-next-to-the-opening-button

The problem is on this line:

mui-x/packages/x-date-pickers/src/internals/components/PickerFieldUI.tsx

Lines 143 to 145 in be7b78c

    
           const { ownerState: endInputAdornmentOwnerState, ...endInputAdornmentProps } = useSlotProps({ 
        
             elementType: InputAdornment, 
        
             externalSlotProps: slotProps?.inputAdornment,

A forgotten case to handle ?? pickerFieldUIContext.slots.inputAdornment.
This felt too fragile to me, given that we've already made a mistake here without noticing. 🙈

This particular issue has been recently resolved with a single line targeted fix: #19399, but I feel like the general approach could still be improved.
Besides, this PR also fixes an additional issue.

I refactored how slots and slotProps are propagated to avoid the need to target slotProps ?? context.slotProps.

…omponent

mui-bot · 2025-07-21T14:37:02Z

Deploy preview: https://deploy-preview-18867--material-ui-x.netlify.app/

Bundle size report

Bundle	Parsed size	Gzip size
@mui/x-data-grid	0B^(0.00%)	0B^(0.00%)
@mui/x-data-grid-pro	0B^(0.00%)	0B^(0.00%)
@mui/x-data-grid-premium	0B^(0.00%)	0B^(0.00%)
@mui/x-charts	0B^(0.00%)	0B^(0.00%)
@mui/x-charts-pro	0B^(0.00%)	0B^(0.00%)
@mui/x-date-pickers	🔺+7B^(0.00%)	▼-2B^(0.00%)
@mui/x-date-pickers-pro	🔺+105B^(+0.03%)	🔺+17B^(+0.02%)
@mui/x-tree-view	0B^(0.00%)	0B^(0.00%)
@mui/x-tree-view-pro	0B^(0.00%)	0B^(0.00%)

Details of bundle changes

Generated by 🚫 dangerJS against 401b4a1

LukasTy · 2025-07-21T14:35:58Z

packages/x-date-pickers-pro/src/internals/hooks/useMobileRangePicker/useMobileRangePicker.tsx

+          {...(isSingleInput && {
+            inputRef,
+          })}


Multi Input fields do not support inputRef prop

LukasTy · 2025-07-21T14:40:42Z

packages/x-date-pickers/src/internals/components/PickerFieldUI.tsx

      </InputAdornment>
    );
  }
+  // handle the case of showing custom `inputAdornment` for Field components


This is to handle a case when a field component would have an inputAdornment slot.
Technically, the API contract declares support for it... 🤷
Basically, to handle a DateField component instead of DatePicker in this demo.

LukasTy · 2025-07-21T14:41:50Z

packages/x-date-pickers/src/internals/components/PickerFieldUI.tsx

-   * Overridable component slots.
-   * @default {}
-   */
-  slots?: PickerFieldUISlots;


This is the main change, PickerFieldUi no longer supports slots and slotProps AND the same props in the context.
In every case, these props are passed via context.

flaviendelangle

Thanks for taking a look at it!

flaviendelangle · 2025-07-22T05:19:17Z

packages/x-date-pickers/src/internals/hooks/useMobilePicker/useMobilePicker.tsx

-          </Layout>
-        </PickersModalDialog>
-      </PickerFieldUIContextProvider>
+      <Field slots={slots} slotProps={slotProps} inputRef={inputRef} {...fieldProps} />


Doesn't this remove the ability to use props.slotProps.field.slotProps.xxx at the picker level?
For example:

<DatePicker slotProps={{ field: { slotProps: { clearIcon: { sx: { opacity: 0 } }, } } }} />

Since it's part of fieldProps but now it would override the props we pass and potentially break stuff (remove the toolbar title id for example).

In most cases it's probably not something we want to encourage (since the slots also exist at the picker level).
But it might be required for some edge cases

I've tested the snippet you provided in the deployed doc, and it seems to work. 🤔 🤷

OK I did found the scenario that do not work 😆

import * as React from 'react'; import dayjs from 'dayjs'; import { DemoContainer } from '@mui/x-date-pickers/internals/demo'; import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; import { DatePicker } from '@mui/x-date-pickers/DatePicker'; export default function BasicDatePicker() { return ( <LocalizationProvider dateAdapter={AdapterDayjs}> <DemoContainer components={['DatePicker']}> <DatePicker defaultValue={dayjs()} slotProps={{ openPickerButton: { sx: { color: 'green' }, }, field: { slotProps: { openPickerButton: { 'data-testid': 'open-picker-button' }, }, }, }} /> </DemoContainer> </LocalizationProvider> ); }

From what I can see, on master it's slotProps.openPickerButton that has the highest priority.
And on your PR it's slotProps.field.slotProps.openPickerButton (because of the spread I commented on I think).

Both fail to correctly merge the 2 objects though.

Feel free to ignore it if you feel it's too much of an edge case.
It's problematic if we set one of the two internally (because it would prevent the user to user the other one without bugs), but I don't think we do.

@flaviendelangle I have updated the solution.
Added a few tests to ensure the fixed Field.slots.inputAdornment behavior stays intact.
Also inverted the order of props to keep the existing behavior you noticed in your comment.

I will just add a note, that based on TS, your example is invalid, field slotProp does not have it's own slotProps. 🙈

github-actions · 2025-09-02T08:09:55Z

This pull request has conflicts, please resolve those before we can evaluate the pull request.

LukasTy · 2025-09-10T12:24:28Z

packages/x-date-pickers/src/DateField/tests/DateField.test.tsx

+      render(
+        <DateField
+          enableAccessibleFieldDOMStructure
+          slots={{ inputAdornment: CustomInputAdornment }}


Add tests to ensure this slot behaves as expected on Field components - this is the main bug-fix in this PR.

flaviendelangle

Couldn't find any problematic edge case 👌

…18867)

[pickers] Ensure slots and slotProps are propagated to internal c…

21d841a

…omponent

LukasTy self-assigned this Jul 21, 2025

LukasTy added type: bug It doesn't behave as expected. scope: pickers Changes related to the date/time pickers. labels Jul 21, 2025

LukasTy commented Jul 21, 2025

View reviewed changes

LukasTy requested review from flaviendelangle and michelengelen July 21, 2025 14:53

flaviendelangle reviewed Jul 22, 2025

View reviewed changes

LukasTy requested a review from flaviendelangle July 28, 2025 06:19

Merge branch 'master' into fix-pickers-inputAdornment-behavior

dce13e3

LukasTy force-pushed the fix-pickers-inputAdornment-behavior branch from 28b5b0d to dce13e3 Compare July 31, 2025 14:11

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged. label Sep 2, 2025

LukasTy added 4 commits September 10, 2025 11:07

Merge branch 'master' into fix-pickers-inputAdornment-behavior

0750fdf

Fix after merge

a755dac

Add tests to cover expected inputAdornment behavior

f64e3cc

Change prop order to avoid strange overridden behaviors

b52c5b2

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged. label Sep 10, 2025

LukasTy changed the title ~~[pickers] Ensure slots and slotProps are propagated to internal component~~ [pickers] Refactor slots and slotProps propagation strategy Sep 10, 2025

Same fix for range pickers

4597ee6

LukasTy commented Sep 10, 2025

View reviewed changes

Merge branch 'master' into fix-pickers-inputAdornment-behavior

401b4a1

LukasTy requested a review from MBilalShafi September 10, 2025 12:43

flaviendelangle approved these changes Sep 15, 2025

View reviewed changes

LukasTy merged commit 8a264a1 into mui:master Sep 15, 2025
21 checks passed

LukasTy deleted the fix-pickers-inputAdornment-behavior branch September 15, 2025 08:38

JCQuintas pushed a commit to JCQuintas/mui-x that referenced this pull request Sep 15, 2025

[pickers] Refactor slots and slotProps propagation strategy (mui#…

847881d

…18867)

	const { ownerState: endInputAdornmentOwnerState, ...endInputAdornmentProps } = useSlotProps({
	elementType: InputAdornment,
	externalSlotProps: slotProps?.inputAdornment,

Uh oh!

[pickers] Refactor slots and slotProps propagation strategy #18867

[pickers] Refactor slots and slotProps propagation strategy #18867

Uh oh!

Conversation

LukasTy commented Jul 21, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

mui-bot commented Jul 21, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Bundle size report

Uh oh!

LukasTy Jul 21, 2025

Choose a reason for hiding this comment

Uh oh!

LukasTy Jul 21, 2025

Choose a reason for hiding this comment

Uh oh!

LukasTy Jul 21, 2025

Choose a reason for hiding this comment

Uh oh!

flaviendelangle left a comment

Choose a reason for hiding this comment

Uh oh!

flaviendelangle Jul 22, 2025

Choose a reason for hiding this comment

Uh oh!

LukasTy Jul 28, 2025

Choose a reason for hiding this comment

Uh oh!

flaviendelangle Sep 2, 2025

Choose a reason for hiding this comment

Uh oh!

LukasTy Sep 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Sep 2, 2025

Uh oh!

LukasTy Sep 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

flaviendelangle left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

[pickers] Refactor `slots` and `slotProps` propagation strategy #18867

[pickers] Refactor `slots` and `slotProps` propagation strategy #18867

LukasTy commented Jul 21, 2025 •

edited

Loading

mui-bot commented Jul 21, 2025 •

edited

Loading

LukasTy Sep 10, 2025 •

edited

Loading

LukasTy Sep 10, 2025 •

edited

Loading