[pickers] Move the opening logic to the range fields

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

@@ -24,7 +24,6 @@ const cacheRtl = createCache({
 
 function ButtonDateTimeField(props) {
   const { internalProps, forwardedProps } = useSplitFieldProps(props, 'date');
-  const { focused, ...other } = forwardedProps;
 
   const pickerContext = usePickerContext();
   const parsedFormat = useParsedFormat();
@@ -42,7 +41,7 @@ function ButtonDateTimeField(props) {
 
   return (
     <Button
-      {...other}
+      {...forwardedProps}
       variant="outlined"
       color={hasValidationError ? 'error' : 'primary'}
       className={pickerContext.rootClassName}

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

@@ -28,7 +28,6 @@ const cacheRtl = createCache({
 
 function ButtonDateTimeField(props: DateTimePickerFieldProps) {
   const { internalProps, forwardedProps } = useSplitFieldProps(props, 'date');
-  const { focused, ...other } = forwardedProps;
 
   const pickerContext = usePickerContext();
   const parsedFormat = useParsedFormat();
@@ -46,7 +45,7 @@ function ButtonDateTimeField(props: DateTimePickerFieldProps) {
 
   return (
     <Button
-      {...other}
+      {...forwardedProps}
       variant="outlined"
       color={hasValidationError ? 'error' : 'primary'}
       className={pickerContext.rootClassName}

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

@@ -4,7 +4,7 @@ import { styled } from '@mui/material/styles';
 import Stack from '@mui/material/Stack';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
-import { usePickerContext, useSplitFieldProps } from '@mui/x-date-pickers/hooks';
+import { useSplitFieldProps } from '@mui/x-date-pickers/hooks';
 import { DateRangePicker } from '@mui/x-date-pickers-pro/DateRangePicker';
 import { useDateRangeManager } from '@mui/x-date-pickers-pro/managers';
 import { unstable_useMultiInputRangeField as useMultiInputRangeField } from '@mui/x-date-pickers-pro/hooks';
@@ -75,7 +75,6 @@ function BrowserTextField(props) {
 }
 
 function BrowserMultiInputDateRangeField(props) {
-  const pickerContext = usePickerContext();
   const manager = useDateRangeManager();
   const { internalProps, forwardedProps } = useSplitFieldProps(props, 'date');
   const { slotProps, ...otherForwardedProps } = forwardedProps;
@@ -95,21 +94,21 @@ function BrowserMultiInputDateRangeField(props) {
   const fieldResponse = useMultiInputRangeField({
     manager,
     internalProps,
-    startForwardedProps: startTextFieldProps,
-    endForwardedProps: endTextFieldProps,
+    startTextFieldProps,
+    endTextFieldProps,
+    rootProps: {
+      spacing: 2,
+      direction: 'row',
+      overflow: 'auto',
+      ...otherForwardedProps,
+    },
   });
 
   return (
-    <Stack
-      ref={pickerContext.rootRef}
-      spacing={2}
-      direction="row"
-      overflow="auto"
-      {...otherForwardedProps}
-    >
-      <BrowserTextField {...fieldResponse.startDate} />
+    <Stack {...fieldResponse.root}>
+      <BrowserTextField {...fieldResponse.startTextField} />
       <span>–</span>
-      <BrowserTextField {...fieldResponse.endDate} />
+      <BrowserTextField {...fieldResponse.endTextField} />
     </Stack>
   );
 }

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

@@ -4,7 +4,7 @@ import { styled } from '@mui/material/styles';
 import Stack from '@mui/material/Stack';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
-import { usePickerContext, useSplitFieldProps } from '@mui/x-date-pickers/hooks';
+import { useSplitFieldProps } from '@mui/x-date-pickers/hooks';
 import {
   DateRangePicker,
   DateRangePickerFieldProps,
@@ -109,7 +109,6 @@ interface BrowserMultiInputDateRangeFieldProps
 function BrowserMultiInputDateRangeField(
   props: BrowserMultiInputDateRangeFieldProps,
 ) {
-  const pickerContext = usePickerContext();
   const manager = useDateRangeManager();
   const { internalProps, forwardedProps } = useSplitFieldProps(props, 'date');
   const { slotProps, ...otherForwardedProps } = forwardedProps;
@@ -129,21 +128,23 @@ function BrowserMultiInputDateRangeField(
   const fieldResponse = useMultiInputRangeField({
     manager,
     internalProps,
-    startForwardedProps: startTextFieldProps,
-    endForwardedProps: endTextFieldProps,
+    startTextFieldProps,
+    endTextFieldProps,
+    rootProps: {
+      spacing: 2,
+      direction: 'row' as const,
+      overflow: 'auto',
+      ...otherForwardedProps,
+    },
   });
 
   return (
-    <Stack
-      ref={pickerContext.rootRef}
-      spacing={2}
-      direction="row"
-      overflow="auto"
-      {...otherForwardedProps}
-    >
-      <BrowserTextField {...(fieldResponse.startDate as BrowserTextFieldProps)} />
+    <Stack {...fieldResponse.root}>
+      <BrowserTextField
+        {...(fieldResponse.startTextField as BrowserTextFieldProps)}
+      />
       <span>–</span>
-      <BrowserTextField {...(fieldResponse.endDate as BrowserTextFieldProps)} />
+      <BrowserTextField {...(fieldResponse.endTextField as BrowserTextFieldProps)} />
     </Stack>
   );
 }

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

@@ -42,7 +42,6 @@ function JoyDateField(props) {
     // Can be used to style the component
     disabled,
     readOnly,
-    focused,
     error,
     inputRef,
     // The rest can be passed to the root element

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

@@ -49,7 +49,6 @@ function JoyDateField(props: DatePickerFieldProps) {
     // Can be used to style the component
     disabled,
     readOnly,
-    focused,
     error,
     inputRef,
 

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

@@ -79,36 +79,39 @@ function JoyMultiInputDateRangeField(props) {
   const startTextFieldProps = useSlotProps({
     elementType: 'input',
     externalSlotProps: slotProps?.textField,
+    additionalProps: { label: 'Start' },
     ownerState: { position: 'start' },
   });
 
   const endTextFieldProps = useSlotProps({
     elementType: 'input',
     externalSlotProps: slotProps?.textField,
+    additionalProps: { label: 'End' },
     ownerState: { position: 'end' },
   });
 
   const fieldResponse = useMultiInputRangeField({
     manager,
     internalProps: { ...internalProps, enableAccessibleFieldDOMStructure: false },
-    startForwardedProps: startTextFieldProps,
-    endForwardedProps: endTextFieldProps,
+    rootProps: {
+      ref: pickerContext.rootRef,
+      spacing: 2,
+      overflow: 'auto',
+      direction: 'row',
+      alignItems: 'center',
+      ...otherForwardedProps,
+    },
+    startTextFieldProps,
+    endTextFieldProps,
   });
 
   return (
-    <Stack
-      spacing={2}
-      overflow="auto"
-      direction="row"
-      alignItems="center"
-      {...otherForwardedProps}
-      ref={pickerContext.rootRef}
-    >
-      <JoyField {...fieldResponse.startDate} />
+    <Stack {...fieldResponse.root}>
+      <JoyField {...fieldResponse.startTextField} />
       <FormControl>
         <Typography sx={{ marginTop: '25px' }}>{' – '}</Typography>
       </FormControl>
-      <JoyField {...fieldResponse.endDate} />
+      <JoyField {...fieldResponse.endTextField} />
     </Stack>
   );
 }

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

@@ -110,36 +110,39 @@ function JoyMultiInputDateRangeField(props: JoyMultiInputDateRangeFieldProps) {
   const startTextFieldProps = useSlotProps({
     elementType: 'input',
     externalSlotProps: slotProps?.textField,
+    additionalProps: { label: 'Start' },
     ownerState: { position: 'start' } as any,
   }) as MultiInputFieldSlotTextFieldProps;
 
   const endTextFieldProps = useSlotProps({
     elementType: 'input',
     externalSlotProps: slotProps?.textField,
+    additionalProps: { label: 'End' },
     ownerState: { position: 'end' } as any,
   }) as MultiInputFieldSlotTextFieldProps;
 
   const fieldResponse = useMultiInputRangeField({
     manager,
     internalProps: { ...internalProps, enableAccessibleFieldDOMStructure: false },
-    startForwardedProps: startTextFieldProps,
-    endForwardedProps: endTextFieldProps,
+    rootProps: {
+      ref: pickerContext.rootRef,
+      spacing: 2,
+      overflow: 'auto',
+      direction: 'row' as const,
+      alignItems: 'center',
+      ...otherForwardedProps,
+    },
+    startTextFieldProps,
+    endTextFieldProps,
   });
 
   return (
-    <Stack
-      spacing={2}
-      overflow="auto"
-      direction="row"
-      alignItems="center"
-      {...otherForwardedProps}
-      ref={pickerContext.rootRef}
-    >
-      <JoyField {...fieldResponse.startDate} />
+    <Stack {...fieldResponse.root}>
+      <JoyField {...fieldResponse.startTextField} />
       <FormControl>
         <Typography sx={{ marginTop: '25px' }}>{' – '}</Typography>
       </FormControl>
-      <JoyField {...fieldResponse.endDate} />
+      <JoyField {...fieldResponse.endTextField} />
     </Stack>
   );
 }

docs/data/date-pickers/custom-field/behavior-autocomplete/MaterialDatePicker.js

@@ -13,7 +13,7 @@ import { useValidation, validateDate } from '@mui/x-date-pickers/validation';
 function AutocompleteField(props) {
   const { forwardedProps, internalProps } = useSplitFieldProps(props, 'date');
   const { timezone, value, setValue } = usePickerContext();
-  const { focused, options = [], ...other } = forwardedProps;
+  const { options = [], ...other } = forwardedProps;
   const pickerContext = usePickerContext();
 
   const { hasValidationError, getValidationErrorForNewValue } = useValidation({
@@ -43,6 +43,7 @@ function AutocompleteField(props) {
           <TextField
             {...params}
             error={hasValidationError}
+            focused={pickerContext.open}
             label={pickerContext.label}
             name={pickerContext.name}
             InputProps={{

docs/data/date-pickers/custom-field/behavior-autocomplete/MaterialDatePicker.tsx

@@ -24,7 +24,7 @@ interface AutocompleteFieldProps extends DatePickerFieldProps {
 function AutocompleteField(props: AutocompleteFieldProps) {
   const { forwardedProps, internalProps } = useSplitFieldProps(props, 'date');
   const { timezone, value, setValue } = usePickerContext();
-  const { focused, options = [], ...other } = forwardedProps;
+  const { options = [], ...other } = forwardedProps;
   const pickerContext = usePickerContext();
 
   const { hasValidationError, getValidationErrorForNewValue } = useValidation({
@@ -55,6 +55,7 @@ function AutocompleteField(props: AutocompleteFieldProps) {
           <TextField
             {...params}
             error={hasValidationError}
+            focused={pickerContext.open}
             label={pickerContext.label}
             name={pickerContext.name}
             InputProps={{

docs/data/date-pickers/custom-field/behavior-button/MaterialDatePicker.js

@@ -13,7 +13,6 @@ import {
 
 function ButtonDateField(props) {
   const { internalProps, forwardedProps } = useSplitFieldProps(props, 'date');
-  const { focused, ...other } = forwardedProps;
 
   const pickerContext = usePickerContext();
   const handleRef = useForkRef(pickerContext.triggerRef, pickerContext.rootRef);
@@ -32,7 +31,7 @@ function ButtonDateField(props) {
 
   return (
     <Button
-      {...other}
+      {...forwardedProps}
       variant="outlined"
       color={hasValidationError ? 'error' : 'primary'}
       ref={handleRef}

docs/data/date-pickers/custom-field/behavior-button/MaterialDatePicker.tsx

@@ -17,7 +17,6 @@ import {
 
 function ButtonDateField(props: DatePickerFieldProps) {
   const { internalProps, forwardedProps } = useSplitFieldProps(props, 'date');
-  const { focused, ...other } = forwardedProps;
 
   const pickerContext = usePickerContext();
   const handleRef = useForkRef(pickerContext.triggerRef, pickerContext.rootRef);
@@ -36,7 +35,7 @@ function ButtonDateField(props: DatePickerFieldProps) {
 
   return (
     <Button
-      {...other}
+      {...forwardedProps}
       variant="outlined"
       color={hasValidationError ? 'error' : 'primary'}
       ref={handleRef}

docs/data/date-pickers/custom-field/behavior-button/MaterialDateRangePicker.js

@@ -15,7 +15,6 @@ import {
 
 function ButtonDateRangeField(props) {
   const { internalProps, forwardedProps } = useSplitFieldProps(props, 'date');
-  const { focused, ...other } = forwardedProps;
 
   const pickerContext = usePickerContext();
   const handleRef = useForkRef(pickerContext.triggerRef, pickerContext.rootRef);
@@ -35,7 +34,7 @@ function ButtonDateRangeField(props) {
 
   return (
     <Button
-      {...other}
+      {...forwardedProps}
       variant="outlined"
       color={hasValidationError ? 'error' : 'primary'}
       ref={handleRef}

docs/data/date-pickers/custom-field/behavior-button/MaterialDateRangePicker.tsx

@@ -19,7 +19,6 @@ import {
 
 function ButtonDateRangeField(props: DateRangePickerFieldProps) {
   const { internalProps, forwardedProps } = useSplitFieldProps(props, 'date');
-  const { focused, ...other } = forwardedProps;
 
   const pickerContext = usePickerContext();
   const handleRef = useForkRef(pickerContext.triggerRef, pickerContext.rootRef);
@@ -39,7 +38,7 @@ function ButtonDateRangeField(props: DateRangePickerFieldProps) {
 
   return (
     <Button
-      {...other}
+      {...forwardedProps}
       variant="outlined"
       color={hasValidationError ? 'error' : 'primary'}
       ref={handleRef}

docs/data/date-pickers/custom-field/behavior-masked-text-field/MaskedMaterialTextField.js

@@ -133,6 +133,7 @@ function MaskedDateField(props) {
     <TextField
       placeholder={parsedFormat}
       error={hasValidationError}
+      focused={pickerContext.open}
       name={pickerContext.name}
       label={pickerContext.label}
       className={pickerContext.rootClassName}

docs/data/date-pickers/custom-field/behavior-masked-text-field/MaskedMaterialTextField.tsx

@@ -137,6 +137,7 @@ function MaskedDateField(props: DatePickerFieldProps) {
     <TextField
       placeholder={parsedFormat}
       error={hasValidationError}
+      focused={pickerContext.open}
       name={pickerContext.name}
       label={pickerContext.label}
       className={pickerContext.rootClassName}

docs/data/date-pickers/custom-field/behavior-read-only-mobile-text-field/MaterialDatePicker.js

@@ -41,6 +41,7 @@ function ReadOnlyDateField(props) {
         sx: { cursor: 'pointer', '& *': { cursor: 'inherit' } },
       }}
       error={hasValidationError}
+      focused={pickerContext.open}
       onClick={() => pickerContext.setOpen((prev) => !prev)}
       name={pickerContext.name}
       label={pickerContext.label}

docs/data/date-pickers/custom-field/behavior-read-only-mobile-text-field/MaterialDatePicker.tsx

@@ -45,6 +45,7 @@ function ReadOnlyDateField(props: DatePickerFieldProps) {
         sx: { cursor: 'pointer', '& *': { cursor: 'inherit' } },
       }}
       error={hasValidationError}
+      focused={pickerContext.open}
       onClick={() => pickerContext.setOpen((prev) => !prev)}
       name={pickerContext.name}
       label={pickerContext.label}

docs/data/date-pickers/custom-field/behavior-read-only-text-field/MaterialDatePicker.js

@@ -39,6 +39,7 @@ function ReadOnlyDateField(props) {
         sx: { cursor: 'pointer', '& *': { cursor: 'inherit' } },
       }}
       error={hasValidationError}
+      focused={pickerContext.open}
       onClick={() => pickerContext.setOpen((prev) => !prev)}
       className={pickerContext.rootClassName}
       sx={pickerContext.rootSx}