[docs] Clarify Pickers clearable behavior not working on mobile (#13786)

Co-authored-by: Lukas <[email protected]>
mui · Jul 12, 2024 · ee1ce3e · ee1ce3e
1 parent 6c67a09
commit ee1ce3e
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 6 deletions.
diff --git a/docs/data/date-pickers/date-picker/ClearableProp.js b/docs/data/date-pickers/date-picker/ClearableProp.js
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { DemoItem } from '@mui/x-date-pickers/internals/demo';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
-import { DatePicker } from '@mui/x-date-pickers/DatePicker';
+import { DesktopDatePicker } from '@mui/x-date-pickers/DesktopDatePicker';
 import Box from '@mui/material/Box';
 import Alert from '@mui/material/Alert';
 
@@ -31,8 +31,8 @@ export default function ClearableProp() {
  position: 'relative',
  }}
  >
- <DemoItem label="DatePicker">
- <DatePicker
+ <DemoItem label="DesktopDatePicker">
+ <DesktopDatePicker
  sx={{ width: 260 }}
  slotProps={{
  field: { clearable: true, onClear: () => setCleared(true) },

diff --git a/docs/data/date-pickers/date-picker/ClearableProp.tsx b/docs/data/date-pickers/date-picker/ClearableProp.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { DemoItem } from '@mui/x-date-pickers/internals/demo';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
-import { DatePicker } from '@mui/x-date-pickers/DatePicker';
+import { DesktopDatePicker } from '@mui/x-date-pickers/DesktopDatePicker';
 import Box from '@mui/material/Box';
 import Alert from '@mui/material/Alert';
 
@@ -31,8 +31,8 @@ export default function ClearableProp() {
  position: 'relative',
  }}
  >
- <DemoItem label="DatePicker">
- <DatePicker
+ <DemoItem label="DesktopDatePicker">
+ <DesktopDatePicker
  sx={{ width: 260 }}
  slotProps={{
  field: { clearable: true, onClear: () => setCleared(true) },

diff --git a/docs/data/date-pickers/date-picker/date-picker.md b/docs/data/date-pickers/date-picker/date-picker.md
@@ -114,6 +114,16 @@ You can enable the clearable behavior:
 
 {{"demo": "ClearableProp.js"}}
 
+:::info
+See [Field components—Clearable behavior](/x/react-date-pickers/fields/#clearable-behavior) for more details.
+:::
+
+:::warning
+The clearable prop is not supported yet by the mobile Picker variants.
+
+See discussion [in this GitHub issue](https://github.com/mui/mui-x/issues/10842#issuecomment-1951887408) for more information.
+:::
+
 ## Localization
 
 See the [Date format and localization](/x/react-date-pickers/adapters-locale/) and [Translated components](/x/react-date-pickers/localization/) documentation pages for more details.