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

LukasTy · JCQuintas · commit 847881d05cd6 · 2025-09-15T10:44:50.000+02:00
diff --git a/packages/x-date-pickers-pro/src/SingleInputDateRangeField/SingleInputDateRangeField.tsx b/packages/x-date-pickers-pro/src/SingleInputDateRangeField/SingleInputDateRangeField.tsx
@@ -4,7 +4,11 @@ import PropTypes from 'prop-types';
 import { useThemeProps } from '@mui/material/styles';
 import refType from '@mui/utils/refType';
 import { DateRangeIcon } from '@mui/x-date-pickers/icons';
-import { PickerFieldUI, useFieldTextFieldProps } from '@mui/x-date-pickers/internals';
+import {
+  PickerFieldUI,
+  PickerFieldUIContextProvider,
+  useFieldTextFieldProps,
+} from '@mui/x-date-pickers/internals';
 import { SingleInputDateRangeFieldProps } from './SingleInputDateRangeField.types';
 import { useSingleInputDateRangeField } from './useSingleInputDateRangeField';
 import { FieldType } from '../models';
@@ -51,12 +55,9 @@ const SingleInputDateRangeField = React.forwardRef(function SingleInputDateRange
   >(textFieldProps);
 
   return (
-    <PickerFieldUI
-      slots={slots}
-      slotProps={slotProps}
-      fieldResponse={fieldResponse}
-      defaultOpenPickerIcon={DateRangeIcon}
-    />
+    <PickerFieldUIContextProvider slots={slots} slotProps={slotProps} inputRef={other.inputRef}>
+      <PickerFieldUI fieldResponse={fieldResponse} defaultOpenPickerIcon={DateRangeIcon} />
+    </PickerFieldUIContextProvider>
   );
 }) as DateRangeFieldComponent;
 
diff --git a/packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.tsx b/packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.tsx
@@ -2,7 +2,11 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { DateRangeIcon } from '@mui/x-date-pickers/icons';
-import { PickerFieldUI, useFieldTextFieldProps } from '@mui/x-date-pickers/internals';
+import {
+  PickerFieldUI,
+  PickerFieldUIContextProvider,
+  useFieldTextFieldProps,
+} from '@mui/x-date-pickers/internals';
 import { useThemeProps } from '@mui/material/styles';
 import refType from '@mui/utils/refType';
 import { SingleInputDateTimeRangeFieldProps } from './SingleInputDateTimeRangeField.types';
@@ -51,12 +55,9 @@ const SingleInputDateTimeRangeField = React.forwardRef(function SingleInputDateT
   >(textFieldProps);
 
   return (
-    <PickerFieldUI
-      slots={slots}
-      slotProps={slotProps}
-      fieldResponse={fieldResponse}
-      defaultOpenPickerIcon={DateRangeIcon}
-    />
+    <PickerFieldUIContextProvider slots={slots} slotProps={slotProps} inputRef={other.inputRef}>
+      <PickerFieldUI fieldResponse={fieldResponse} defaultOpenPickerIcon={DateRangeIcon} />
+    </PickerFieldUIContextProvider>
   );
 }) as DateRangeFieldComponent;
 
diff --git a/packages/x-date-pickers-pro/src/SingleInputTimeRangeField/SingleInputTimeRangeField.tsx b/packages/x-date-pickers-pro/src/SingleInputTimeRangeField/SingleInputTimeRangeField.tsx
@@ -2,7 +2,11 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { ClockIcon } from '@mui/x-date-pickers/icons';
-import { PickerFieldUI, useFieldTextFieldProps } from '@mui/x-date-pickers/internals';
+import {
+  PickerFieldUI,
+  PickerFieldUIContextProvider,
+  useFieldTextFieldProps,
+} from '@mui/x-date-pickers/internals';
 import { useThemeProps } from '@mui/material/styles';
 import refType from '@mui/utils/refType';
 import { SingleInputTimeRangeFieldProps } from './SingleInputTimeRangeField.types';
@@ -51,12 +55,9 @@ const SingleInputTimeRangeField = React.forwardRef(function SingleInputTimeRange
   >(textFieldProps);
 
   return (
-    <PickerFieldUI
-      slots={slots}
-      slotProps={slotProps}
-      fieldResponse={fieldResponse}
-      defaultOpenPickerIcon={ClockIcon}
-    />
+    <PickerFieldUIContextProvider slots={slots} slotProps={slotProps} inputRef={other.inputRef}>
+      <PickerFieldUI fieldResponse={fieldResponse} defaultOpenPickerIcon={ClockIcon} />
+    </PickerFieldUIContextProvider>
   );
 }) as DateRangeFieldComponent;
 
diff --git a/packages/x-date-pickers-pro/src/internals/hooks/useDesktopRangePicker/useDesktopRangePicker.tsx b/packages/x-date-pickers-pro/src/internals/hooks/useDesktopRangePicker/useDesktopRangePicker.tsx
@@ -9,7 +9,6 @@ import {
   DateOrTimeViewWithMeridiem,
   PickerProvider,
   PickerRangeValue,
-  PickerFieldUIContextProvider,
 } from '@mui/x-date-pickers/internals';
 import {
   UseDesktopRangePickerParams,
@@ -39,7 +38,8 @@ export const useDesktopRangePicker = <
   const { slots, slotProps, inputRef, localeText } = props;
 
   const fieldType = getRangeFieldType(slots.field);
-  const viewContainerRole = fieldType === 'single-input' ? 'dialog' : 'tooltip';
+  const isSingleInput = fieldType === 'single-input';
+  const viewContainerRole = isSingleInput ? 'dialog' : 'tooltip';
   const rangePositionResponse = useRangePosition(props);
 
   const getStepNavigation = createRangePickerStepNavigation({
@@ -81,16 +81,21 @@ export const useDesktopRangePicker = <
 
   const renderPicker = () => (
     <PickerProvider {...providerProps}>
-      <PickerFieldUIContextProvider slots={slots} slotProps={slotProps} inputRef={inputRef}>
-        <PickerRangePositionContext.Provider value={rangePositionResponse}>
-          <Field {...fieldProps} />
-          <PickerPopper slots={slots} slotProps={slotProps}>
-            <Layout {...slotProps?.layout} slots={slots} slotProps={slotProps}>
-              {renderCurrentView()}
-            </Layout>
-          </PickerPopper>
-        </PickerRangePositionContext.Provider>
-      </PickerFieldUIContextProvider>
+      <PickerRangePositionContext.Provider value={rangePositionResponse}>
+        <Field
+          {...fieldProps}
+          slots={slots}
+          slotProps={slotProps}
+          {...(isSingleInput && {
+            inputRef,
+          })}
+        />
+        <PickerPopper slots={slots} slotProps={slotProps}>
+          <Layout {...slotProps?.layout} slots={slots} slotProps={slotProps}>
+            {renderCurrentView()}
+          </Layout>
+        </PickerPopper>
+      </PickerRangePositionContext.Provider>
     </PickerProvider>
   );
 
diff --git a/packages/x-date-pickers-pro/src/internals/hooks/useMobileRangePicker/useMobileRangePicker.tsx b/packages/x-date-pickers-pro/src/internals/hooks/useMobileRangePicker/useMobileRangePicker.tsx
@@ -11,7 +11,6 @@ import {
   DateOrTimeViewWithMeridiem,
   PickerProvider,
   PickerRangeValue,
-  PickerFieldUIContextProvider,
 } from '@mui/x-date-pickers/internals';
 import { usePickerTranslations } from '@mui/x-date-pickers/hooks';
 import { FieldOwnerState } from '@mui/x-date-pickers/models';
@@ -43,6 +42,7 @@ export const useMobileRangePicker = <
   const { slots, slotProps: innerSlotProps, label, inputRef, localeText } = props;
 
   const fieldType = getRangeFieldType(slots.field);
+  const isSingleInput = fieldType === 'single-input';
   const rangePositionResponse = useRangePosition(props);
   const contextTranslations = usePickerTranslations();
 
@@ -76,7 +76,7 @@ export const useMobileRangePicker = <
     elementType: Field,
     externalSlotProps: innerSlotProps?.field,
     additionalProps: {
-      ...(fieldType === 'single-input' &&
+      ...(isSingleInput &&
         isToolbarHidden && {
           id: labelId,
         }),
@@ -131,16 +131,21 @@ export const useMobileRangePicker = <
 
   const renderPicker = () => (
     <PickerProvider {...providerProps}>
-      <PickerFieldUIContextProvider slots={slots} slotProps={slotProps} inputRef={inputRef}>
-        <PickerRangePositionContext.Provider value={rangePositionResponse}>
-          <Field {...fieldProps} />
-          <PickersModalDialog slots={slots} slotProps={slotProps}>
-            <Layout {...slotProps?.layout} slots={slots} slotProps={slotProps}>
-              {renderCurrentView()}
-            </Layout>
-          </PickersModalDialog>
-        </PickerRangePositionContext.Provider>
-      </PickerFieldUIContextProvider>
+      <PickerRangePositionContext.Provider value={rangePositionResponse}>
+        <Field
+          {...fieldProps}
+          slots={slots}
+          slotProps={slotProps}
+          {...(isSingleInput && {
+            inputRef,
+          })}
+        />
+        <PickersModalDialog slots={slots} slotProps={slotProps}>
+          <Layout {...slotProps?.layout} slots={slots} slotProps={slotProps}>
+            {renderCurrentView()}
+          </Layout>
+        </PickersModalDialog>
+      </PickerRangePositionContext.Provider>
     </PickerProvider>
   );
 
diff --git a/packages/x-date-pickers/src/DateField/DateField.tsx b/packages/x-date-pickers/src/DateField/DateField.tsx
@@ -5,7 +5,11 @@ import { useThemeProps } from '@mui/material/styles';
 import refType from '@mui/utils/refType';
 import { DateFieldProps } from './DateField.types';
 import { useDateField } from './useDateField';
-import { PickerFieldUI, useFieldTextFieldProps } from '../internals/components/PickerFieldUI';
+import {
+  PickerFieldUI,
+  PickerFieldUIContextProvider,
+  useFieldTextFieldProps,
+} from '../internals/components/PickerFieldUI';
 import { CalendarIcon } from '../icons';
 
 type DateFieldComponent = (<TEnableAccessibleFieldDOMStructure extends boolean = true>(
@@ -45,12 +49,9 @@ const DateField = React.forwardRef(function DateField<
   );
 
   return (
-    <PickerFieldUI
-      slots={slots}
-      slotProps={slotProps}
-      fieldResponse={fieldResponse}
-      defaultOpenPickerIcon={CalendarIcon}
-    />
+    <PickerFieldUIContextProvider slots={slots} slotProps={slotProps} inputRef={other.inputRef}>
+      <PickerFieldUI fieldResponse={fieldResponse} defaultOpenPickerIcon={CalendarIcon} />
+    </PickerFieldUIContextProvider>
   );
 }) as DateFieldComponent;
 
diff --git a/packages/x-date-pickers/src/DateField/tests/DateField.test.tsx b/packages/x-date-pickers/src/DateField/tests/DateField.test.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import InputAdornment, { InputAdornmentProps } from '@mui/material/InputAdornment';
 import { DateField } from '@mui/x-date-pickers/DateField';
 import { screen } from '@mui/internal-test-utils';
 import { createPickerRenderer } from 'test/utils/pickers';
@@ -45,4 +46,40 @@ describe('<DateField />', () => {
       expect(screen.getByRole('textbox', { description: 'field-helper' })).not.to.equal(null);
     });
   });
+
+  describe('slotProps.inputAdornment behavior', () => {
+    function CustomInputAdornment(props: InputAdornmentProps) {
+      const { children, ...other } = props;
+      return (
+        <InputAdornment {...other}>
+          <span>x</span>
+          {children}
+        </InputAdornment>
+      );
+    }
+
+    it('should respect the `slots.inputAdornment` on accessible DOM structure', () => {
+      render(
+        <DateField
+          enableAccessibleFieldDOMStructure
+          slots={{ inputAdornment: CustomInputAdornment }}
+          slotProps={{ inputAdornment: { 'aria-label': 'test-adornment-icon', role: 'figure' } }}
+        />,
+      );
+
+      expect(screen.getByRole('figure', { name: 'test-adornment-icon' })).to.have.text('x');
+    });
+
+    it('should respect the `slots.inputAdornment` on non-accessible DOM structure', () => {
+      render(
+        <DateField
+          enableAccessibleFieldDOMStructure={false}
+          slots={{ inputAdornment: CustomInputAdornment }}
+          slotProps={{ inputAdornment: { 'aria-label': 'test-adornment-icon', role: 'figure' } }}
+        />,
+      );
+
+      expect(screen.getByRole('figure', { name: 'test-adornment-icon' })).to.have.text('x');
+    });
+  });
 });
diff --git a/packages/x-date-pickers/src/DateTimeField/DateTimeField.tsx b/packages/x-date-pickers/src/DateTimeField/DateTimeField.tsx
@@ -5,7 +5,11 @@ import { useThemeProps } from '@mui/material/styles';
 import refType from '@mui/utils/refType';
 import { DateTimeFieldProps } from './DateTimeField.types';
 import { useDateTimeField } from './useDateTimeField';
-import { PickerFieldUI, useFieldTextFieldProps } from '../internals/components/PickerFieldUI';
+import {
+  PickerFieldUI,
+  PickerFieldUIContextProvider,
+  useFieldTextFieldProps,
+} from '../internals/components/PickerFieldUI';
 import { CalendarIcon } from '../icons';
 
 type DateTimeFieldComponent = (<TEnableAccessibleFieldDOMStructure extends boolean = true>(
@@ -49,12 +53,9 @@ const DateTimeField = React.forwardRef(function DateTimeField<
   );
 
   return (
-    <PickerFieldUI
-      slots={slots}
-      slotProps={slotProps}
-      fieldResponse={fieldResponse}
-      defaultOpenPickerIcon={CalendarIcon}
-    />
+    <PickerFieldUIContextProvider slots={slots} slotProps={slotProps} inputRef={other.inputRef}>
+      <PickerFieldUI fieldResponse={fieldResponse} defaultOpenPickerIcon={CalendarIcon} />
+    </PickerFieldUIContextProvider>
   );
 }) as DateTimeFieldComponent;
 
diff --git a/packages/x-date-pickers/src/DesktopDatePicker/tests/DesktopDatePicker.test.tsx b/packages/x-date-pickers/src/DesktopDatePicker/tests/DesktopDatePicker.test.tsx
@@ -8,6 +8,7 @@ import { createPickerRenderer, adapterToUse, openPickerAsync } from 'test/utils/
 import { isJSDOM } from 'test/utils/skipIf';
 import { PickersActionBar, PickersActionBarAction } from '@mui/x-date-pickers/PickersActionBar';
 import { PickerValidDate } from '@mui/x-date-pickers/models';
+import InputAdornment, { InputAdornmentProps } from '@mui/material/InputAdornment';
 
 describe('<DesktopDatePicker />', () => {
   const { render } = createPickerRenderer();
@@ -485,4 +486,40 @@ describe('<DesktopDatePicker />', () => {
       expect(screen.getByRole('textbox')).attribute('name').to.equal('test-field');
     });
   });
+
+  describe('slotProps.inputAdornment behavior', () => {
+    function CustomInputAdornment(props: InputAdornmentProps) {
+      const { children, ...other } = props;
+      return (
+        <InputAdornment {...other}>
+          <span>x</span>
+          {children}
+        </InputAdornment>
+      );
+    }
+
+    it('should respect the `slots.inputAdornment` on accessible DOM structure', () => {
+      render(
+        <DesktopDatePicker
+          enableAccessibleFieldDOMStructure
+          slots={{ inputAdornment: CustomInputAdornment }}
+          slotProps={{ inputAdornment: { 'aria-label': 'test-adornment-icon', role: 'figure' } }}
+        />,
+      );
+
+      expect(screen.getByRole('figure', { name: 'test-adornment-icon' })).to.have.text('x');
+    });
+
+    it('should respect the `slots.inputAdornment` on non-accessible DOM structure', () => {
+      render(
+        <DesktopDatePicker
+          enableAccessibleFieldDOMStructure={false}
+          slots={{ inputAdornment: CustomInputAdornment }}
+          slotProps={{ inputAdornment: { 'aria-label': 'test-adornment-icon', role: 'figure' } }}
+        />,
+      );
+
+      expect(screen.getByRole('figure', { name: 'test-adornment-icon' })).to.have.text('x');
+    });
+  });
 });
diff --git a/packages/x-date-pickers/src/TimeField/TimeField.tsx b/packages/x-date-pickers/src/TimeField/TimeField.tsx
@@ -5,7 +5,11 @@ import { useThemeProps } from '@mui/material/styles';
 import refType from '@mui/utils/refType';
 import { TimeFieldProps } from './TimeField.types';
 import { useTimeField } from './useTimeField';
-import { PickerFieldUI, useFieldTextFieldProps } from '../internals/components/PickerFieldUI';
+import {
+  PickerFieldUI,
+  PickerFieldUIContextProvider,
+  useFieldTextFieldProps,
+} from '../internals/components/PickerFieldUI';
 import { ClockIcon } from '../icons';
 
 type TimeFieldComponent = (<TEnableAccessibleFieldDOMStructure extends boolean = true>(
@@ -45,12 +49,9 @@ const TimeField = React.forwardRef(function TimeField<
   );
 
   return (
-    <PickerFieldUI
-      slots={slots}
-      slotProps={slotProps}
-      fieldResponse={fieldResponse}
-      defaultOpenPickerIcon={ClockIcon}
-    />
+    <PickerFieldUIContextProvider slots={slots} slotProps={slotProps} inputRef={other.inputRef}>
+      <PickerFieldUI fieldResponse={fieldResponse} defaultOpenPickerIcon={ClockIcon} />
+    </PickerFieldUIContextProvider>
   );
 }) as TimeFieldComponent;
 
diff --git a/packages/x-date-pickers/src/internals/components/PickerFieldUI.tsx b/packages/x-date-pickers/src/internals/components/PickerFieldUI.tsx
diff --git a/packages/x-date-pickers/src/internals/hooks/useDesktopPicker/useDesktopPicker.tsx b/packages/x-date-pickers/src/internals/hooks/useDesktopPicker/useDesktopPicker.tsx
diff --git a/packages/x-date-pickers/src/internals/hooks/useMobilePicker/useMobilePicker.tsx b/packages/x-date-pickers/src/internals/hooks/useMobilePicker/useMobilePicker.tsx
