[pickers] Implement clearable field behavior

[noraleonte]

Closes #4450
Closes #10492

Add a clearable prop to the pickers

[noraleonte]

@flaviendelangle @LukasTy can you please look at this when you have time? I would like to confirm with you whether my approach for this is right. Thanks 🎉

[mui-bot]

Localization writing tips ✍️

Seems you are updating localization 🌍 files.

Thank you for contributing to the localization! 🎉 To make your PR perfect, here is a list of elements to check: ✔️

• Verify if the PR title respects the release format. Here are two examples (depending if you update or add a locale file)

  [l10n] Improve Swedish (sv-SE) locale
  [l10n] Add Danish (da-DK) locale

• Update the documentation of supported locales by running yarn l10n
• Clean files with yarn prettier.

Netlify deploy preview

Netlify deploy preview: https://deploy-preview-9095--material-ui-x.netlify.app/

Updated pages

• docs/data/date-pickers/custom-field/custom-field.md
• docs/data/date-pickers/date-picker/date-picker.md
• docs/data/date-pickers/fields/fields.md

These are the results for the performance tests:

Test case	Unit	Min	Max	Median	Mean	σ
Filter 100k rows	ms	-180.6	-7.9	-7.9	-76.86	63.651
Sort 100k rows	ms	736.9	1,450.5	1,435	1,262.62	268.706
Select 100k rows	ms	685.2	816.4	727.2	752.12	51.526
Deselect 100k rows	ms	142	210.4	199.7	189.44	24.316

Generated by 🚫 dangerJS against 089d467

[LukasTy]

Great start! 👍
I do think that the general direction is inline with what we were thinking about.
Refinement and integration with pickers would probably be the biggest problems with the most amount of different opinions. 🙈 🤷

[LukasTy]

Nice progress! 👍
Some general comments:

• it would be nice to play with styles so that the field width wouldn't change regardless of clearable flag and whether the button is visible or hidden.
• should this feature be opt-in or opt-out as in Autocomplete (disableClearable)? cc @flaviendelangle @joserodolfofreitas

[github-actions]

This pull request has conflicts, please resolve those before we can evaluate the pull request.

[github-actions]

This pull request has conflicts, please resolve those before we can evaluate the pull request.

[LukasTy]

Great work! 💯 🚀 💙
It looks and feels ready for prime time and battle testing. 😱
While checking this PR I noticed a related problem that could easily be solved here as well.
Passing event empty slots object to BrowserDatePicker, BrowserDateRangePicker, and JoyDateRangePicker components causes the original TextField component to be used.
Could you please address this issue by swaping the order of {...props} spreading to be before the slots to avoid this issue? 🙈 🙏

[LukasTy]

Did a final detailed round of review, tested slots and slotProps usage as well as a11y behavior.
Here is a diff that fixes slots and slotProps propagation from picker level.
Also a fix to correctly handle className on IconButton to allow for additional className being passed via slotProps.clearButton.className.

diff --git a/packages/x-date-pickers-pro/src/internals/hooks/useEnrichedRangePickerFieldProps.ts b/packages/x-date-pickers-pro/src/internals/hooks/useEnrichedRangePickerFieldProps.ts
index d901ce8a6..d57cead66 100644
--- a/packages/x-date-pickers-pro/src/internals/hooks/useEnrichedRangePickerFieldProps.ts
+++ b/packages/x-date-pickers-pro/src/internals/hooks/useEnrichedRangePickerFieldProps.ts
@@ -321,12 +321,15 @@ const useSingleInputFieldSlotProps = <TDate, TView extends DateOrTimeViewWithMer
   const slots: ReturnType['slots'] = {
     ...fieldProps.slots,
     textField: pickerSlots?.textField,
+    clearButton: pickerSlots?.clearButton,
     clearIcon: pickerSlots?.clearIcon,
   };
 
   const slotProps: ReturnType['slotProps'] = {
     ...fieldProps.slotProps,
     textField: pickerSlotProps?.textField,
+    clearButton: pickerSlotProps?.clearButton,
+    clearIcon: pickerSlotProps?.clearIcon,
   };
 
   const enrichedFieldProps: ReturnType = {
diff --git a/packages/x-date-pickers/src/hooks/useClearableField.tsx b/packages/x-date-pickers/src/hooks/useClearableField.tsx
index a68448eda..9bcaad16c 100644
--- a/packages/x-date-pickers/src/hooks/useClearableField.tsx
+++ b/packages/x-date-pickers/src/hooks/useClearableField.tsx
@@ -45,14 +45,19 @@ export const useClearableField = <
   const localeText = useLocaleText();
 
   const IconButton = slots?.clearButton ?? MuiIconButton;
-  const iconButtonProps = useSlotProps({
-    elementType: MuiIconButton,
+  // The spread is here to avoid this bug mui/material-ui#34056
+  const { ownerState, ...iconButtonProps } = useSlotProps({
+    elementType: IconButton,
     externalSlotProps: slotProps?.clearButton,
     ownerState: {},
+    className: 'clearButton',
+    additionalProps: {
+      title: localeText.clearLabel,
+    },
   });
   const EndClearIcon = slots?.clearIcon ?? ClearIcon;
   const endClearIconProps = useSlotProps({
-    elementType: ClearIcon,
+    elementType: EndClearIcon,
     externalSlotProps: slotProps?.clearIcon,
     ownerState: {},
   });
@@ -65,12 +70,7 @@ export const useClearableField = <
           position="end"
           sx={{ marginRight: ForwardedInputProps?.endAdornment ? -1 : -1.5 }}
         >
-          <IconButton
-            aria-label={localeText.clearLabel}
-            {...iconButtonProps}
-            className="clearButton"
-            onClick={onClear}
-          >
+          <IconButton {...iconButtonProps} onClick={onClear}>
             <EndClearIcon fontSize="small" {...endClearIconProps} />
           </IconButton>
         </InputAdornment>

[LukasTy]

WDYT about going with a bit longer label and ditching the comment as the label key would seem self-explanatory. 🤔
WDYT about using Clear value label to be more expressive and avoid duplication on screen readers?
As it is, now screen reader reads this label as "Clear button, button".
IMHO, hearing "Clear value, button" would be a better UX. 🤔

P.S. I've tested only with title and screen readers seemed to be happy (MacOS Voice over and NVDA on Windows), but the "suggestion" on the interwebs seems to push towards providing both... Maybe... Especially in cases of anchor links, but for buttons without inner text... 🤷

Suggested change

	// Clear button label
	clearLabel: 'Clear button',
	clearButtonLabel: 'Clear value',

[noraleonte]

We already have a clearButtonLabel for the action bar. WDYT about clearIconButtonLabel?

[LukasTy]

Gotcha.
Then maybe move it close to field labels and rename it to fieldClearButtonLabel or fieldClearLabel?
Both are good alternatives IMHO. Maybe the second one is even safer as it does not tie the label to the button implementation detail, but on the other hand - it's a little less clear. 🤷 🙈

[noraleonte]

fieldClearLabel it is then 🎉

[LukasTy]

Forgot to initially take a look at the slots ?? components behavior.
We do not currently support it for these new slots. 🙈

Here is a diff to enable it on one of the components. The components and componentsSlots need to to be passed down the the hook from all usages.

diff --git a/packages/x-date-pickers-pro/src/SingleInputDateRangeField/SingleInputDateRangeField.tsx b/packages/x-date-pickers-pro/src/SingleInputDateRangeField/SingleInputDateRangeField.tsx
index cbde32ff7..940008ed2 100644
--- a/packages/x-date-pickers-pro/src/SingleInputDateRangeField/SingleInputDateRangeField.tsx
+++ b/packages/x-date-pickers-pro/src/SingleInputDateRangeField/SingleInputDateRangeField.tsx
@@ -69,6 +69,8 @@ const SingleInputDateRangeField = React.forwardRef(function SingleInputDateRange
     InputProps: fieldProps.InputProps,
     slots,
     slotProps,
+    components,
+    componentsProps,
   });
 
   return (
diff --git a/packages/x-date-pickers/src/hooks/useClearableField.tsx b/packages/x-date-pickers/src/hooks/useClearableField.tsx
index a68448eda..abfb93c18 100644
--- a/packages/x-date-pickers/src/hooks/useClearableField.tsx
+++ b/packages/x-date-pickers/src/hooks/useClearableField.tsx
@@ -22,6 +22,8 @@ type UseClearableFieldProps<
   onClear: React.MouseEventHandler<HTMLButtonElement>;
   slots?: { [K in keyof TFieldSlots as Uncapitalize<K & string>]: TFieldSlots[K] };
   slotProps?: TFieldSlotsComponentsProps;
+  components?: TFieldSlots;
+  componentsProps?: TFieldSlotsComponentsProps;
 };
 
 export const useClearableField = <
@@ -36,6 +38,8 @@ export const useClearableField = <
   onClear,
   slots,
   slotProps,
+  components,
+  componentsProps,
 }: UseClearableFieldProps<
   TFieldProps,
   TInputProps,
@@ -44,16 +48,16 @@ export const useClearableField = <
 >) => {
   const localeText = useLocaleText();
 
-  const IconButton = slots?.clearButton ?? MuiIconButton;
+  const IconButton = slots?.clearButton ?? components?.ClearButton ?? MuiIconButton;
   const iconButtonProps = useSlotProps({
     elementType: MuiIconButton,
-    externalSlotProps: slotProps?.clearButton,
+    externalSlotProps: slotProps?.clearButton ?? componentsProps?.clearButton,
     ownerState: {},
   });
-  const EndClearIcon = slots?.clearIcon ?? ClearIcon;
+  const EndClearIcon = slots?.clearIcon ?? components?.ClearIcon ?? ClearIcon;
   const endClearIconProps = useSlotProps({
     elementType: ClearIcon,
-    externalSlotProps: slotProps?.clearIcon,
+    externalSlotProps: slotProps?.clearIcon ?? componentsProps?.clearIcon,
     ownerState: {},
   });

[LukasTy]

Looking great!
Massive effort on a very much anticipated feature. 👏
Left one final improvement to make the a11y experience better. 😉
I'd love for this to end up in this week's release. 🤞 🙏