[pickers] Implement clearable field behavior

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

@@ -14,6 +14,8 @@ import { unstable_useMultiInputDateRangeField as useMultiInputDateRangeField } f
 import { DatePicker } from '@mui/x-date-pickers/DatePicker';
 import { unstable_useDateField as useDateField } from '@mui/x-date-pickers/DateField';
 
+import { useClearableField } from '@mui/x-date-pickers/hooks';
+
 const BrowserField = React.forwardRef((props, inputRef) => {
   const {
     disabled,
@@ -24,12 +26,13 @@ const BrowserField = React.forwardRef((props, inputRef) => {
     error,
     focused,
     ownerState,
+    sx,
     ...other
   } = props;
 
   return (
     <Box
-      sx={{ display: 'flex', alignItems: 'center', flexGrow: 1 }}
+      sx={{ ...(sx || {}), display: 'flex', alignItems: 'center', flexGrow: 1 }}
       id={id}
       ref={containerRef}
     >
@@ -50,26 +53,42 @@ const BrowserSingleInputDateRangeField = React.forwardRef((props, ref) => {
     ownerState: props,
   });
 
-  const response = useSingleInputDateRangeField({
+  const {
+    onClear,
+    clearable,
+    slots: inSlots,
+    slotProps: inSlotProps,
+    ...fieldProps
+  } = useSingleInputDateRangeField({
     props: textFieldProps,
     inputRef: externalInputRef,
   });
 
-  return (
-    <BrowserField
-      {...response}
-      style={{
-        minWidth: 300,
-      }}
-      InputProps={{
-        ...response.InputProps,
-        ref,
+  /* If you don't need a clear button, you can skip the use of this hook */
+  const { InputProps: ProcessedInputProps, fieldProps: processedFieldProps } =
+    useClearableField({
+      onClear,
+      clearable,
+      fieldProps,
+      InputProps: {
+        ...fieldProps.InputProps,
         endAdornment: (
           <IconButton onClick={onAdornmentClick}>
             <DateRangeIcon />
           </IconButton>
         ),
+      },
+      slots: inSlots,
+      slotProps: inSlotProps,
+    });
+
+  return (
+    <BrowserField
+      {...processedFieldProps}
+      style={{
+        minWidth: 300,
       }}
+      InputProps={{ ...ProcessedInputProps, ref }}
     />
   );
 });
@@ -87,14 +106,14 @@ function BrowserSingleInputDateRangePicker(props) {
 
   return (
     <DateRangePicker
+      {...props}
       open={isOpen}
       onClose={handleClose}
       onOpen={handleOpen}
       slots={{ field: BrowserSingleInputDateRangeField }}
       slotProps={{
-        field: { onAdornmentClick: toggleOpen },
+        field: { onAdornmentClick: toggleOpen, ...props?.slotProps?.field },
       }}
-      {...props}
     />
   );
 }
@@ -170,14 +189,25 @@ function BrowserDateRangePicker(props) {
 }
 
 function BrowserDateField(props) {
-  const { inputRef: externalInputRef, slots, slotProps, ...textFieldProps } = props;
+  const { inputRef: externalInputRef, ...textFieldProps } = props;
 
-  const response = useDateField({
+  const { onClear, clearable, slots, slotProps, ...fieldProps } = useDateField({
     props: textFieldProps,
     inputRef: externalInputRef,
   });
 
-  return <BrowserField {...response} />;
+  /* If you don't need a clear button, you can skip the use of this hook */
+  const { InputProps: ProcessedInputProps, fieldProps: processedFieldProps } =
+    useClearableField({
+      onClear,
+      clearable,
+      fieldProps,
+      InputProps: fieldProps.InputProps,
+      slots,
+      slotProps,
+    });
+
+  return <BrowserField {...processedFieldProps} InputProps={ProcessedInputProps} />;
 }
 
 function BrowserDatePicker(props) {
@@ -192,8 +222,16 @@ export default function PickerWithBrowserField() {
       <DemoContainer
         components={['DatePicker', 'SingleInputDateRangeField', 'DateRangePicker']}
       >
-        <BrowserDatePicker />
-        <BrowserSingleInputDateRangePicker />
+        <BrowserDatePicker
+          slotProps={{
+            field: { clearable: true },
+          }}
+        />
+        <BrowserSingleInputDateRangePicker
+          slotProps={{
+            field: { clearable: true },
+          }}
+        />
         <BrowserDateRangePicker />
       </DemoContainer>
     </LocalizationProvider>

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

@@ -22,6 +22,11 @@ import {
   unstable_useDateField as useDateField,
   UseDateFieldProps,
 } from '@mui/x-date-pickers/DateField';
+import {
+  DateFieldSlotsComponent,
+  DateFieldSlotsComponentsProps,
+} from '@mui/x-date-pickers/DateField/DateField.types';
+import { useClearableField } from '@mui/x-date-pickers/hooks';
 import {
   BaseMultiInputFieldProps,
   DateRange,
@@ -45,6 +50,7 @@ interface BrowserFieldProps
   error?: boolean;
   focused?: boolean;
   ownerState?: any;
+  sx?: any;
 }
 
 type BrowserFieldComponent = ((
@@ -62,12 +68,13 @@ const BrowserField = React.forwardRef(
       error,
       focused,
       ownerState,
+      sx,
       ...other
     } = props;
 
     return (
       <Box
-        sx={{ display: 'flex', alignItems: 'center', flexGrow: 1 }}
+        sx={{ ...(sx || {}), display: 'flex', alignItems: 'center', flexGrow: 1 }}
         id={id}
         ref={containerRef}
       >
@@ -109,26 +116,47 @@ const BrowserSingleInputDateRangeField = React.forwardRef(
       ownerState: props as any,
     });
 
-    const response = useSingleInputDateRangeField<Dayjs, typeof textFieldProps>({
+    const {
+      onClear,
+      clearable,
+      slots: inSlots,
+      slotProps: inSlotProps,
+      ...fieldProps
+    } = useSingleInputDateRangeField<Dayjs, typeof textFieldProps>({
       props: textFieldProps,
       inputRef: externalInputRef,
     });
 
-    return (
-      <BrowserField
-        {...response}
-        style={{
-          minWidth: 300,
-        }}
-        InputProps={{
-          ...response.InputProps,
-          ref,
+    /* If you don't need a clear button, you can skip the use of this hook */
+    const { InputProps: ProcessedInputProps, fieldProps: processedFieldProps } =
+      useClearableField<
+        {},
+        typeof textFieldProps.InputProps,
+        DateFieldSlotsComponent,
+        DateFieldSlotsComponentsProps<Dayjs>
+      >({
+        onClear,
+        clearable,
+        fieldProps,
+        InputProps: {
+          ...fieldProps.InputProps,
           endAdornment: (
             <IconButton onClick={onAdornmentClick}>
               <DateRangeIcon />
             </IconButton>
           ),
+        },
+        slots: inSlots as any,
+        slotProps: inSlotProps as any,
+      });
+
+    return (
+      <BrowserField
+        {...processedFieldProps}
+        style={{
+          minWidth: 300,
         }}
+        InputProps={{ ...ProcessedInputProps, ref }}
       />
     );
   },
@@ -147,14 +175,14 @@ function BrowserSingleInputDateRangePicker(props: DateRangePickerProps<Dayjs>) {
 
   return (
     <DateRangePicker
+      {...props}
       open={isOpen}
       onClose={handleClose}
       onOpen={handleOpen}
       slots={{ field: BrowserSingleInputDateRangeField }}
       slotProps={{
-        field: { onAdornmentClick: toggleOpen } as any,
+        field: { onAdornmentClick: toggleOpen, ...props?.slotProps?.field } as any,
       }}
-      {...props}
     />
   );
 }
@@ -257,14 +285,33 @@ interface BrowserDateFieldProps
     > {}
 
 function BrowserDateField(props: BrowserDateFieldProps) {
-  const { inputRef: externalInputRef, slots, slotProps, ...textFieldProps } = props;
+  const { inputRef: externalInputRef, ...textFieldProps } = props;
 
-  const response = useDateField<Dayjs, typeof textFieldProps>({
+  const { onClear, clearable, slots, slotProps, ...fieldProps } = useDateField<
+    Dayjs,
+    typeof textFieldProps
+  >({
     props: textFieldProps,
     inputRef: externalInputRef,
   });
 
-  return <BrowserField {...response} />;
+  /* If you don't need a clear button, you can skip the use of this hook */
+  const { InputProps: ProcessedInputProps, fieldProps: processedFieldProps } =
+    useClearableField<
+      {},
+      typeof textFieldProps.InputProps,
+      DateFieldSlotsComponent,
+      DateFieldSlotsComponentsProps<Dayjs>
+    >({
+      onClear,
+      clearable,
+      fieldProps,
+      InputProps: fieldProps.InputProps,
+      slots,
+      slotProps,
+    });
+
+  return <BrowserField {...processedFieldProps} InputProps={ProcessedInputProps} />;
 }
 
 function BrowserDatePicker(props: DatePickerProps<Dayjs>) {
@@ -279,8 +326,16 @@ export default function PickerWithBrowserField() {
       <DemoContainer
         components={['DatePicker', 'SingleInputDateRangeField', 'DateRangePicker']}
       >
-        <BrowserDatePicker />
-        <BrowserSingleInputDateRangePicker />
+        <BrowserDatePicker
+          slotProps={{
+            field: { clearable: true },
+          }}
+        />
+        <BrowserSingleInputDateRangePicker
+          slotProps={{
+            field: { clearable: true },
+          }}
+        />
         <BrowserDateRangePicker />
       </DemoContainer>
     </LocalizationProvider>

docs/data/date-pickers/custom-field/PickerWithBrowserField.tsx.preview

@@ -1,3 +1,11 @@
-<BrowserDatePicker />
-<BrowserSingleInputDateRangePicker />
+<BrowserDatePicker
+  slotProps={{
+    field: { clearable: true },
+  }}
+/>
+<BrowserSingleInputDateRangePicker
+  slotProps={{
+    field: { clearable: true },
+  }}
+/>
 <BrowserDateRangePicker />