[pickers] Clean popper position on new pickers

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 }) {

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)} />
   );
 }
 

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 = {
   /**

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 (

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 = {
   /**

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 (

packages/x-date-pickers-pro/src/MultiInputDateRangeField/MultiInputDateRangeField.tsx

@@ -29,6 +29,13 @@ const MultiInputDateRangeFieldSeparator = styled(
   },
 )({});
 
+const MultiInputDateRangeFieldTextField = styled(MuiTextField, {
+  name: 'MuiMultiInputDateRangeField',
+  slot: 'TextField',
+  overridesResolver: (props, styles) => styles.textField,
+})({
+  // flexGrow: 1,
+});
 type MultiInputDateRangeFieldComponent = (<TDate>(
   props: MultiInputDateRangeFieldProps<TDate> & React.RefAttributes<HTMLInputElement>,
 ) => JSX.Element) & { propTypes?: any };
@@ -80,7 +87,7 @@ const MultiInputDateRangeField = React.forwardRef(function MultiInputDateRangeFi
     ownerState,
   });
 
-  const TextField = slots?.textField ?? MuiTextField;
+  const TextField = slots?.textField ?? MultiInputDateRangeFieldTextField;
   const startTextFieldProps: FieldsTextFieldProps = useSlotProps({
     elementType: TextField,
     externalSlotProps: slotProps?.textField,
@@ -141,6 +148,7 @@ const MultiInputDateRangeField = React.forwardRef(function MultiInputDateRangeFi
   return (
     <Root {...rootProps}>
       <TextField
+        fullWidth
         {...startDateProps}
         inputProps={{
           ...startDateProps.inputProps,
@@ -152,6 +160,7 @@ const MultiInputDateRangeField = React.forwardRef(function MultiInputDateRangeFi
       />
       <Separator {...separatorProps} />
       <TextField
+        fullWidth
         {...endDateProps}
         inputProps={{
           ...endDateProps.inputProps,

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>

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}