Skip to content

[pickers] MuiPickersLayout-toolbar is overlapping the Calendar in RTL MobileDatePicker variant #18972

@BatshevaOz

Description

@BatshevaOz

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:

  1. Add a MobileDatePicker or regular DatePicker component to your app.
  2. 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
  3. To reproduce, click the 'Open In New Window' button in the sandbox preview:
Image 3. Click the calendar icon on the MobileDatePicker - the picker pops open with the toolbar overlapping the calendar. 4. To reproduce with the regular DatePicker, click F12 to open the developer tools. Now click on the DatePicker's Calendar icon - also here, the toolbar overlaps the calendar.

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:

Smaller than 833:
Image

Greater than 833:
Image

Expected behavior

The MuiPickersLayout-toolbar should appear side by side with the calendar, as it does when the DatePicker is not RTL:
Image

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

Metadata

Metadata

Assignees

Labels

scope: pickersChanges related to the date/time pickers.type: bugIt doesn't behave as expected.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions