[docs] Clarify Pickers clearable behavior not working on mobile (mui#…

…13786) Co-authored-by: Lukas <[email protected]>
thomasmoon · Sep 6, 2024 · e12d0dc · e12d0dc
1 parent 30a257f
commit e12d0dc
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
@@ -118,6 +118,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.