diff --git a/docs/data/data-grid/recipes-editing/EditingWithDatePickers.js b/docs/data/data-grid/recipes-editing/EditingWithDatePickers.js
index 18b29b5c961f..542114ae1f51 100644
--- a/docs/data/data-grid/recipes-editing/EditingWithDatePickers.js
+++ b/docs/data/data-grid/recipes-editing/EditingWithDatePickers.js
@@ -175,8 +175,8 @@ const GridEditDateInput = styled(InputBase)({
 });
 
 function WrappedGridEditDateInput(props) {
-  const { inputRef, InputProps, ...other } = props;
-  return <GridEditDateInput fullWidth ref={inputRef} {...InputProps} {...other} />;
+  const { InputProps, ...other } = props;
+  return <GridEditDateInput fullWidth {...InputProps} {...other} />;
 }
 
 WrappedGridEditDateInput.propTypes = {
@@ -187,15 +187,6 @@ WrappedGridEditDateInput.propTypes = {
    * component depending on the `variant` prop value.
    */
   InputProps: PropTypes.object,
-  /**
-   * Pass a ref to the `input` element.
-   */
-  inputRef: PropTypes.oneOfType([
-    PropTypes.func,
-    PropTypes.shape({
-      current: PropTypes.any.isRequired,
-    }),
-  ]),
 };
 
 function GridEditDateCell({ id, field, value, colDef }) {
diff --git a/docs/data/data-grid/recipes-editing/EditingWithDatePickers.tsx b/docs/data/data-grid/recipes-editing/EditingWithDatePickers.tsx
index 54abc9fd000c..7e22c3e3cebb 100644
--- a/docs/data/data-grid/recipes-editing/EditingWithDatePickers.tsx
+++ b/docs/data/data-grid/recipes-editing/EditingWithDatePickers.tsx
@@ -187,14 +187,9 @@ const GridEditDateInput = styled(InputBase)({
 });
 
 function WrappedGridEditDateInput(props: TextFieldProps) {
-  const { inputRef, InputProps, ...other } = props;
+  const { InputProps, ...other } = props;
   return (
-    <GridEditDateInput
-      fullWidth
-      ref={inputRef}
-      {...InputProps}
-      {...(other as InputBaseProps)}
-    />
+    <GridEditDateInput fullWidth {...InputProps} {...(other as InputBaseProps)} />
   );
 }
 
diff --git a/docs/data/date-pickers/date-picker/CustomInput.js b/docs/data/date-pickers/date-picker/CustomInput.js
index 96ee0ef4b080..6076895dc3ff 100644
--- a/docs/data/date-pickers/date-picker/CustomInput.js
+++ b/docs/data/date-pickers/date-picker/CustomInput.js
@@ -6,16 +6,16 @@ import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 import { DatePicker } from '@mui/x-date-pickers/DatePicker';
 
-function BrowserInput(props) {
+const BrowserInput = function BrowserInput(props) {
   const { inputProps, InputProps, ownerState, inputRef, error, ...other } = props;
 
   return (
-    <Box sx={{ display: 'flex', alignItems: 'center' }}>
+    <Box sx={{ display: 'flex', alignItems: 'center' }} ref={InputProps?.ref}>
       <input ref={inputRef} {...inputProps} {...other} />
       {InputProps?.endAdornment}
     </Box>
   );
-}
+};
 
 BrowserInput.propTypes = {
   /**
diff --git a/docs/data/date-pickers/date-picker/CustomInput.tsx b/docs/data/date-pickers/date-picker/CustomInput.tsx
index 03974fd6fd42..b406a20520c3 100644
--- a/docs/data/date-pickers/date-picker/CustomInput.tsx
+++ b/docs/data/date-pickers/date-picker/CustomInput.tsx
@@ -9,16 +9,16 @@ type BrowserInputProps = TextFieldProps & {
   ownerState?: any;
 };
 
-function BrowserInput(props: BrowserInputProps) {
+const BrowserInput = function BrowserInput(props: BrowserInputProps) {
   const { inputProps, InputProps, ownerState, inputRef, error, ...other } = props;
 
   return (
-    <Box sx={{ display: 'flex', alignItems: 'center' }}>
+    <Box sx={{ display: 'flex', alignItems: 'center' }} ref={InputProps?.ref}>
       <input ref={inputRef} {...inputProps} {...(other as any)} />
       {InputProps?.endAdornment}
     </Box>
   );
-}
+};
 
 export default function CustomInput() {
   return (
diff --git a/docs/data/date-pickers/date-range-picker/CustomInputs.js b/docs/data/date-pickers/date-range-picker/CustomInputs.js
index 095d5e6f2e3d..c148e3f46a8b 100644
--- a/docs/data/date-pickers/date-range-picker/CustomInputs.js
+++ b/docs/data/date-pickers/date-range-picker/CustomInputs.js
@@ -7,16 +7,16 @@ import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 import { DateRangePicker } from '@mui/x-date-pickers-pro/DateRangePicker';
 
-function BrowserInput(props) {
+const BrowserInput = function BrowserInput(props) {
   const { inputProps, InputProps, ownerState, inputRef, error, ...other } = props;
 
   return (
-    <Box sx={{ display: 'flex', alignItems: 'center' }}>
+    <Box sx={{ display: 'flex', alignItems: 'center' }} ref={InputProps?.ref}>
       <input ref={inputRef} {...inputProps} {...other} />
       {InputProps?.endAdornment}
     </Box>
   );
-}
+};
 
 BrowserInput.propTypes = {
   /**
diff --git a/docs/data/date-pickers/date-range-picker/CustomInputs.tsx b/docs/data/date-pickers/date-range-picker/CustomInputs.tsx
index be347b1f685e..5df5b9648b7d 100644
--- a/docs/data/date-pickers/date-range-picker/CustomInputs.tsx
+++ b/docs/data/date-pickers/date-range-picker/CustomInputs.tsx
@@ -10,16 +10,16 @@ type BrowserInputProps = TextFieldProps & {
   ownerState?: any;
 };
 
-function BrowserInput(props: BrowserInputProps) {
+const BrowserInput = function BrowserInput(props: BrowserInputProps) {
   const { inputProps, InputProps, ownerState, inputRef, error, ...other } = props;
 
   return (
-    <Box sx={{ display: 'flex', alignItems: 'center' }}>
+    <Box sx={{ display: 'flex', alignItems: 'center' }} ref={InputProps?.ref}>
       <input ref={inputRef} {...inputProps} {...(other as any)} />
       {InputProps?.endAdornment}
     </Box>
   );
-}
+};
 
 export default function CustomInputs() {
   return (
diff --git a/packages/x-date-pickers-pro/src/MultiInputDateRangeField/MultiInputDateRangeField.tsx b/packages/x-date-pickers-pro/src/MultiInputDateRangeField/MultiInputDateRangeField.tsx
index 35bf4d45d318..069cc93f54ae 100644
--- a/packages/x-date-pickers-pro/src/MultiInputDateRangeField/MultiInputDateRangeField.tsx
+++ b/packages/x-date-pickers-pro/src/MultiInputDateRangeField/MultiInputDateRangeField.tsx
@@ -141,6 +141,7 @@ const MultiInputDateRangeField = React.forwardRef(function MultiInputDateRangeFi
   return (
     <Root {...rootProps}>
       <TextField
+        fullWidth
         {...startDateProps}
         inputProps={{
           ...startDateProps.inputProps,
@@ -152,6 +153,7 @@ const MultiInputDateRangeField = React.forwardRef(function MultiInputDateRangeFi
       />
       <Separator {...separatorProps} />
       <TextField
+        fullWidth
         {...endDateProps}
         inputProps={{
           ...endDateProps.inputProps,
diff --git a/packages/x-date-pickers-pro/src/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.tsx b/packages/x-date-pickers-pro/src/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.tsx
index 25d584a876e8..d845feaa36a6 100644
--- a/packages/x-date-pickers-pro/src/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.tsx
+++ b/packages/x-date-pickers-pro/src/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.tsx
@@ -153,6 +153,7 @@ const MultiInputDateTimeRangeField = React.forwardRef(function MultiInputDateTim
   return (
     <Root {...rootProps}>
       <TextField
+        fullWidth
         {...startDateProps}
         inputProps={{
           ...startDateProps.inputProps,
@@ -164,6 +165,7 @@ const MultiInputDateTimeRangeField = React.forwardRef(function MultiInputDateTim
       />
       <Separator {...separatorProps} />
       <TextField
+        fullWidth
         {...endDateProps}
         inputProps={{
           ...endDateProps.inputProps,
diff --git a/packages/x-date-pickers-pro/src/MultiInputTimeRangeField/MultiInputTimeRangeField.tsx b/packages/x-date-pickers-pro/src/MultiInputTimeRangeField/MultiInputTimeRangeField.tsx
index 17af4eaaab38..1703e28d5cd8 100644
--- a/packages/x-date-pickers-pro/src/MultiInputTimeRangeField/MultiInputTimeRangeField.tsx
+++ b/packages/x-date-pickers-pro/src/MultiInputTimeRangeField/MultiInputTimeRangeField.tsx
@@ -144,6 +144,7 @@ const MultiInputTimeRangeField = React.forwardRef(function MultiInputTimeRangeFi
   return (
     <Root {...rootProps}>
       <TextField
+        fullWidth
         {...startDateProps}
         inputProps={{
           ...startDateProps.inputProps,
@@ -155,6 +156,7 @@ const MultiInputTimeRangeField = React.forwardRef(function MultiInputTimeRangeFi
       />
       <Separator {...separatorProps} />
       <TextField
+        fullWidth
         {...endDateProps}
         inputProps={{
           ...endDateProps.inputProps,
diff --git a/packages/x-date-pickers/src/internals/components/PickersPopper.tsx b/packages/x-date-pickers/src/internals/components/PickersPopper.tsx
index ce76123ad686..62c50a62a3a1 100644
--- a/packages/x-date-pickers/src/internals/components/PickersPopper.tsx
+++ b/packages/x-date-pickers/src/internals/components/PickersPopper.tsx
@@ -72,6 +72,7 @@ export interface PickerPopperProps extends UsePickerValueActions {
   role: 'tooltip' | 'dialog';
   anchorEl: MuiPopperProps['anchorEl'];
   open: MuiPopperProps['open'];
+  placement?: MuiPopperProps['placement'];
   containerRef?: React.Ref<HTMLDivElement>;
   children?: React.ReactNode;
   onBlur?: () => void;
@@ -271,6 +272,7 @@ export function PickersPopper(inProps: PickerPopperProps) {
     onDismiss,
     open,
     role,
+    placement,
     components,
     componentsProps,
     slots: innerSlots,
@@ -360,6 +362,7 @@ export function PickersPopper(inProps: PickerPopperProps) {
       role,
       open,
       anchorEl,
+      placement,
       onKeyDown: handleKeyDown,
     },
     className: classes.root,
@@ -368,7 +371,7 @@ export function PickersPopper(inProps: PickerPopperProps) {
 
   return (
     <Popper {...popperProps}>
-      {({ TransitionProps, placement }) => (
+      {({ TransitionProps, placement: popperPlacement }) => (
         <TrapFocus
           open={open}
           disableAutoFocus
@@ -391,7 +394,7 @@ export function PickersPopper(inProps: PickerPopperProps) {
                 onPaperTouchStart(event);
                 paperProps.onTouchStart?.(event);
               }}
-              ownerState={{ ...ownerState, placement }}
+              ownerState={{ ...ownerState, placement: popperPlacement }}
             >
               {children}
             </Paper>
diff --git a/packages/x-date-pickers/src/internals/hooks/useDesktopPicker/useDesktopPicker.tsx b/packages/x-date-pickers/src/internals/hooks/useDesktopPicker/useDesktopPicker.tsx
index 5212fc460756..53afd457fb59 100644
--- a/packages/x-date-pickers/src/internals/hooks/useDesktopPicker/useDesktopPicker.tsx
+++ b/packages/x-date-pickers/src/internals/hooks/useDesktopPicker/useDesktopPicker.tsx
@@ -47,6 +47,7 @@ export const useDesktopPicker = <
 
   const utils = useUtils<TDate>();
   const internalInputRef = React.useRef<HTMLInputElement>(null);
+  const containerRef = React.useRef<HTMLDivElement>(null);
   const labelId = useId();
 
   const {
@@ -130,6 +131,7 @@ export const useDesktopPicker = <
         ...inputPropsPassedByField,
         ...externalInputProps,
         InputProps: {
+          ref: containerRef,
           [`${inputAdornmentProps.position}Adornment`]: hasUIView ? (
             <InputAdornment {...inputAdornmentProps}>
               <OpenPickerButton {...openPickerButtonProps}>
@@ -179,7 +181,8 @@ export const useDesktopPicker = <
         />
         <PickersPopper
           role="dialog"
-          anchorEl={internalInputRef.current}
+          placement="bottom-start"
+          anchorEl={containerRef.current}
           {...actions}
           open={open}
           slots={slots}