[pickers] Let the field components handle their opening UI, and allow field editing on mobile pickers

docs/data/date-pickers/base-concepts/base-concepts.md

@@ -113,10 +113,10 @@ Each _Picker_ is available in a responsive, desktop and mobile variant:
 - The responsive component (for example `DatePicker`) which renders the desktop component or the mobile one depending on the device it runs on.
 
 - The desktop component (for example `DesktopDatePicker`) which works best for mouse devices and large screens.
-  It renders the views inside a popover and allows editing values directly inside the field.
+  It renders the views inside a popover and a field for keyboard editing.
 
 - The mobile component (for example `MobileDatePicker`) which works best for touch devices and small screens.
-  It renders the view inside a modal and does not allow editing values directly inside the field.
+  It renders the view inside a modal and a field for keyboard editing.
 
 {{"demo": "ResponsivePickers.js"}}
 

docs/data/date-pickers/calendar-systems/AdapterHijri.js

@@ -25,16 +25,8 @@ const cacheRtl = createCache({
 function ButtonDateTimeField(props) {
   const { internalProps, forwardedProps } = useSplitFieldProps(props, 'date');
   const { value, timezone, format } = internalProps;
-  const {
-    InputProps,
-    slotProps,
-    slots,
-    ownerState,
-    label,
-    focused,
-    name,
-    ...other
-  } = forwardedProps;
+  const { slotProps, slots, ownerState, label, focused, name, ...other } =
+    forwardedProps;
 
   const pickerContext = usePickerContext();
 
@@ -53,7 +45,7 @@ function ButtonDateTimeField(props) {
       {...other}
       variant="outlined"
       color={hasValidationError ? 'error' : 'primary'}
-      ref={InputProps?.ref}
+      ref={pickerContext.triggerRef}
       onClick={() => pickerContext.setOpen((prev) => !prev)}
     >
       {label ? `${label}: ${valueStr}` : valueStr}

docs/data/date-pickers/calendar-systems/AdapterHijri.tsx

@@ -29,16 +29,8 @@ const cacheRtl = createCache({
 function ButtonDateTimeField(props: DateTimePickerFieldProps) {
   const { internalProps, forwardedProps } = useSplitFieldProps(props, 'date');
   const { value, timezone, format } = internalProps;
-  const {
-    InputProps,
-    slotProps,
-    slots,
-    ownerState,
-    label,
-    focused,
-    name,
-    ...other
-  } = forwardedProps;
+  const { slotProps, slots, ownerState, label, focused, name, ...other } =
+    forwardedProps;
 
   const pickerContext = usePickerContext();
 
@@ -57,7 +49,7 @@ function ButtonDateTimeField(props: DateTimePickerFieldProps) {
       {...other}
       variant="outlined"
       color={hasValidationError ? 'error' : 'primary'}
-      ref={InputProps?.ref}
+      ref={pickerContext.triggerRef}
       onClick={() => pickerContext.setOpen((prev) => !prev)}
     >
       {label ? `${label}: ${valueStr}` : valueStr}

docs/data/date-pickers/custom-field/BrowserV7Field.js

@@ -1,11 +1,14 @@
 import * as React from 'react';
 import useForkRef from '@mui/utils/useForkRef';
 import { styled } from '@mui/material/styles';
+import IconButton from '@mui/material/IconButton';
+import { CalendarIcon } from '@mui/x-date-pickers/icons';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import { DatePicker } from '@mui/x-date-pickers/DatePicker';
 import { unstable_useDateField as useDateField } from '@mui/x-date-pickers/DateField';
 import { Unstable_PickersSectionList as PickersSectionList } from '@mui/x-date-pickers/PickersSectionList';
+import { usePickerContext } from '@mui/x-date-pickers/hooks';
 
 const BrowserFieldRoot = styled('div', { name: 'BrowserField', slot: 'Root' })({
   display: 'flex',
@@ -41,6 +44,8 @@ const BrowserDateField = React.forwardRef((props, ref) => {
     onInput,
     onPaste,
     onKeyDown,
+    // Should be passed to the button that opens the picker
+    openPickerAriaLabel,
     // Can be passed to a hidden <input /> element
     onChange,
     value,
@@ -55,16 +60,15 @@ const BrowserDateField = React.forwardRef((props, ref) => {
     readOnly,
     focused,
     error,
-    InputProps: { ref: InputPropsRef, startAdornment, endAdornment } = {},
     // The rest can be passed to the root element
     ...other
   } = fieldResponse;
 
-  const handleRef = useForkRef(InputPropsRef, ref);
+  const pickerContext = usePickerContext();
+  const handleRef = useForkRef(pickerContext.triggerRef, ref);
 
   return (
     <BrowserFieldRoot ref={handleRef} {...other}>
-      {startAdornment}
       <BrowserFieldContent>
         <PickersSectionList
           elements={elements}
@@ -78,7 +82,13 @@ const BrowserDateField = React.forwardRef((props, ref) => {
           onKeyDown={onKeyDown}
         />
       </BrowserFieldContent>
-      {endAdornment}
+      <IconButton
+        onClick={() => pickerContext.setOpen((prev) => !prev)}
+        sx={{ marginLeft: 1.5 }}
+        aria-label={openPickerAriaLabel}
+      >
+        <CalendarIcon />
+      </IconButton>
     </BrowserFieldRoot>
   );
 });

docs/data/date-pickers/custom-field/BrowserV7Field.tsx

@@ -1,6 +1,8 @@
 import * as React from 'react';
 import useForkRef from '@mui/utils/useForkRef';
 import { styled } from '@mui/material/styles';
+import IconButton from '@mui/material/IconButton';
+import { CalendarIcon } from '@mui/x-date-pickers/icons';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import {
@@ -10,6 +12,7 @@ import {
 } from '@mui/x-date-pickers/DatePicker';
 import { unstable_useDateField as useDateField } from '@mui/x-date-pickers/DateField';
 import { Unstable_PickersSectionList as PickersSectionList } from '@mui/x-date-pickers/PickersSectionList';
+import { usePickerContext } from '@mui/x-date-pickers/hooks';
 
 const BrowserFieldRoot = styled('div', { name: 'BrowserField', slot: 'Root' })({
   display: 'flex',
@@ -48,6 +51,9 @@ const BrowserDateField = React.forwardRef(
       onPaste,
       onKeyDown,
 
+      // Should be passed to the button that opens the picker
+      openPickerAriaLabel,
+
       // Can be passed to a hidden <input /> element
       onChange,
       value,
@@ -66,17 +72,15 @@ const BrowserDateField = React.forwardRef(
       focused,
       error,
 
-      InputProps: { ref: InputPropsRef, startAdornment, endAdornment } = {},
-
       // The rest can be passed to the root element
       ...other
     } = fieldResponse;
 
-    const handleRef = useForkRef(InputPropsRef, ref);
+    const pickerContext = usePickerContext();
+    const handleRef = useForkRef(pickerContext.triggerRef, ref);
 
     return (
       <BrowserFieldRoot ref={handleRef} {...other}>
-        {startAdornment}
         <BrowserFieldContent>
           <PickersSectionList
             elements={elements}
@@ -90,7 +94,13 @@ const BrowserDateField = React.forwardRef(
             onKeyDown={onKeyDown}
           />
         </BrowserFieldContent>
-        {endAdornment}
+        <IconButton
+          onClick={() => pickerContext.setOpen((prev) => !prev)}
+          sx={{ marginLeft: 1.5 }}
+          aria-label={openPickerAriaLabel}
+        >
+          <CalendarIcon />
+        </IconButton>
       </BrowserFieldRoot>
     );
   },

docs/data/date-pickers/custom-field/BrowserV7MultiInputRangeField.js

@@ -100,13 +100,13 @@ const BrowserMultiInputDateRangeField = React.forwardRef((props, ref) => {
   const startTextFieldProps = useSlotProps({
     elementType: 'input',
     externalSlotProps: slotProps?.textField,
-    ownerState: { ...props, position: 'start' },
+    ownerState: {},
   });
 
   const endTextFieldProps = useSlotProps({
     elementType: 'input',
     externalSlotProps: slotProps?.textField,
-    ownerState: { ...props, position: 'end' },
+    ownerState: {},
   });
 
   const fieldResponse = useMultiInputDateRangeField({
@@ -131,6 +131,19 @@ const BrowserMultiInputDateRangeField = React.forwardRef((props, ref) => {
     unstableEndFieldRef,
   });
 
+  const {
+    onClear: onClearStartDate,
+    clearable: isStartDateClearable,
+    openPickerAriaLabel: openPickerStartDateAriaLabel,
+    ...startDateProps
+  } = fieldResponse.startDate;
+  const {
+    onClear: onClearEndDate,
+    clearable: isEndDateClearable,
+    openPickerAriaLabel: openPickerEndDateAriaLabel,
+    ...endDateProps
+  } = fieldResponse.endDate;
+
   return (
     <Stack
       ref={ref}
@@ -139,9 +152,9 @@ const BrowserMultiInputDateRangeField = React.forwardRef((props, ref) => {
       overflow="auto"
       className={className}
     >
-      <BrowserTextField {...fieldResponse.startDate} />
+      <BrowserTextField {...startDateProps} />
       <span> — </span>
-      <BrowserTextField {...fieldResponse.endDate} />
+      <BrowserTextField {...endDateProps} />
     </Stack>
   );
 });

docs/data/date-pickers/custom-field/BrowserV7MultiInputRangeField.tsx

@@ -136,13 +136,13 @@ const BrowserMultiInputDateRangeField = React.forwardRef(
     const startTextFieldProps = useSlotProps({
       elementType: 'input',
       externalSlotProps: slotProps?.textField,
-      ownerState: { ...props, position: 'start' },
+      ownerState: {} as any,
     }) as MultiInputFieldSlotTextFieldProps;
 
     const endTextFieldProps = useSlotProps({
       elementType: 'input',
       externalSlotProps: slotProps?.textField,
-      ownerState: { ...props, position: 'end' },
+      ownerState: {} as any,
     }) as MultiInputFieldSlotTextFieldProps;
 
     const fieldResponse = useMultiInputDateRangeField<
@@ -170,6 +170,19 @@ const BrowserMultiInputDateRangeField = React.forwardRef(
       unstableEndFieldRef,
     });
 
+    const {
+      onClear: onClearStartDate,
+      clearable: isStartDateClearable,
+      openPickerAriaLabel: openPickerStartDateAriaLabel,
+      ...startDateProps
+    } = fieldResponse.startDate;
+    const {
+      onClear: onClearEndDate,
+      clearable: isEndDateClearable,
+      openPickerAriaLabel: openPickerEndDateAriaLabel,
+      ...endDateProps
+    } = fieldResponse.endDate;
+
     return (
       <Stack
         ref={ref}
@@ -178,9 +191,9 @@ const BrowserMultiInputDateRangeField = React.forwardRef(
         overflow="auto"
         className={className}
       >
-        <BrowserTextField {...fieldResponse.startDate} />
+        <BrowserTextField {...startDateProps} />
         <span> — </span>
-        <BrowserTextField {...fieldResponse.endDate} />
+        <BrowserTextField {...endDateProps} />
       </Stack>
     );
   },

docs/data/date-pickers/custom-field/BrowserV7SingleInputRangeField.js

@@ -59,13 +59,12 @@ const BrowserSingleInputDateRangeField = React.forwardRef((props, ref) => {
     readOnly,
     focused,
     error,
-    InputProps: { ref: InputPropsRef, startAdornment, endAdornment } = {},
     // The rest can be passed to the root element
     ...other
   } = fieldResponse;
 
   const pickerContext = usePickerContext();
-  const handleRef = useForkRef(InputPropsRef, ref);
+  const handleRef = useForkRef(pickerContext.triggerRef, ref);
 
   return (
     <BrowserFieldRoot
@@ -75,7 +74,6 @@ const BrowserSingleInputDateRangeField = React.forwardRef((props, ref) => {
         minWidth: 300,
       }}
     >
-      {startAdornment}
       <BrowserFieldContent>
         <PickersSectionList
           elements={elements}
@@ -89,7 +87,6 @@ const BrowserSingleInputDateRangeField = React.forwardRef((props, ref) => {
           onKeyDown={onKeyDown}
         />
       </BrowserFieldContent>
-      {endAdornment}
       <InputAdornment position="end">
         <IconButton onClick={() => pickerContext.setOpen((prev) => !prev)}>
           <DateRangeIcon />

docs/data/date-pickers/custom-field/BrowserV7SingleInputRangeField.tsx

@@ -77,14 +77,12 @@ const BrowserSingleInputDateRangeField = React.forwardRef(
       focused,
       error,
 
-      InputProps: { ref: InputPropsRef, startAdornment, endAdornment } = {},
-
       // The rest can be passed to the root element
       ...other
     } = fieldResponse;
 
     const pickerContext = usePickerContext();
-    const handleRef = useForkRef(InputPropsRef, ref);
+    const handleRef = useForkRef(pickerContext.triggerRef, ref);
 
     return (
       <BrowserFieldRoot
@@ -94,7 +92,6 @@ const BrowserSingleInputDateRangeField = React.forwardRef(
           minWidth: 300,
         }}
       >
-        {startAdornment}
         <BrowserFieldContent>
           <PickersSectionList
             elements={elements}
@@ -108,7 +105,6 @@ const BrowserSingleInputDateRangeField = React.forwardRef(
             onKeyDown={onKeyDown}
           />
         </BrowserFieldContent>
-        {endAdornment}
         <InputAdornment position="end">
           <IconButton onClick={() => pickerContext.setOpen((prev) => !prev)}>
             <DateRangeIcon />