-
-
Notifications
You must be signed in to change notification settings - Fork 1.6k
Description
Steps to reproduce
Open this link to live example:
https://codesandbox.io/p/sandbox/great-chihiro-hzny3f
I initially reproduced the issue in the RTL Support example in the docs:
https://mui.com/x/react-date-pickers/adapters-locale/#rtl-support
Then I edited the code in CodeSandbox.
Steps:
- Add a MobileDatePicker or regular DatePicker component to your app.
- Add the appropriate properties in the theme and in the DatePickers SlotProps as explained in the docs:
https://mui.com/x/react-date-pickers/adapters-locale/#rtl-support - To reproduce, click the 'Open In New Window' button in the sandbox preview:
Note:
Looking at the styles, it seemed that the issue was this property:
MuiPickersLayout-root .MuiPickersLayout-toolbar {
grid-column: 3;
}
When I unchecked the style - the layout fixed itself.
Current behavior
MuiPickersLayout-toolbar is overlapping the Calendar in RTL MobileDatePicker variant when the viewport is 833 pixels or greater:
Expected behavior
The MuiPickersLayout-toolbar should appear side by side with the calendar, as it does when the DatePicker is not RTL:
Context
A responsive RTL DatePicker used with Hebrew that looks good across devices.
Your environment
npx @mui/envinfo
The bug was reproduced in CodeSandbox with the latest versions and also locally on my PC using:
Browser: Google Chrome
System:
OS: Windows 10 10.0.19045
Binaries:
Node: 22.17.1 - C:\Program Files\nodejs\node.EXE
npm: 10.9.2 - C:\Program Files\nodejs\npm.CMD
pnpm: Not Found
Browsers:
Chrome: Not Found
Edge: Chromium (127.0.2651.74)
npmPackages:
@emotion/react: ^11.11.1 => 11.14.0
@emotion/styled: ^11.11.0 => 11.14.1
@mui/core-downloads-tracker: 7.2.0
@mui/icons-material: ^7.2.0 => 7.2.0
@mui/lab: ^7.0.0-beta.14 => 7.0.0-beta.14
@mui/material: ^7.2.0 => 7.2.0
@mui/private-theming: 7.2.0
@mui/styled-engine: 7.2.0
@mui/system: ^7.2.0 => 7.2.0
@mui/types: 7.4.4
@mui/utils: 7.2.0
@mui/x-data-grid: ^8.5.0 => 8.7.0
@mui/x-date-pickers: ^8.9.0 => 8.9.0
@mui/x-internals: 8.7.0
@types/react: ^19.0.0 => 19.1.8
react: ^19.0.0 => 19.1.0
react-dom: ^19.0.0 => 19.1.0
typescript: ^4.9.5 => 4.9.5
Search keywords: rtl date picker