[pickers] MuiPickersLayout-toolbar is overlapping the Calendar in RTL MobileDatePicker variant #18981
Conversation
|
Deploy preview: https://deploy-preview-18981--material-ui-x.netlify.app/ Bundle size report
|
|
I tried with some shortcuts just in case: <MobileDatePicker
label="Mobile Date Picker"
defaultValue={dayjs('2022-04-17')}
slotProps={{
mobilePaper: {
dir: 'rtl',
},
shortcuts: {
items: shortcutsItems,
},
}}
/>Before: After: So your fix doesn't cause any regression, but we have another issue 😆 |
ohhh 🙈 Let me check if I can quickly fix that too! Good catch! |
|
Actually @flaviendelangle I think this is how it should look like 🧐 (RTL), so even when no shortcuts are rendered, the date selection remains positioned at the top rather than on the side. Am I right? |
|
According to the Material Design 2 spec the toolbar should be on the side. |
e388d2a to
a10cbd9
Compare
…overlapping-the-calendar-in-rtl-mobiledatepicker-variant
|
@flaviendelangle I managed to fix both bugs, not sure if this is the best approach though 🤔 Demos (with and without slots) https://github.com/user-attachments/assets/116723e9-ba99-4953-aabf-a6e16e70d00c |
…overlapping-the-calendar-in-rtl-mobiledatepicker-variant
| }); | ||
| }) as PickersShortcutsProps<TValue>; | ||
|
|
||
| const hasShortcuts = Array.isArray(shortcutsProps?.items) && shortcutsProps.items.length > 0; |
There was a problem hiding this comment.
😢 Always sad when we need to fake some data in the owner state because we need the resolved slot props to create the owner state.
I don't have a better solution without a breaking change though :/
There was a problem hiding this comment.
Yes, that was the part that made me think "Maybe there's a better solution" 😢
There was a problem hiding this comment.
Not with the current architecture
Base UI approach makes this kind of stuff a lot easier to handle...
Issue #18972
Remove redundant RTL-specific layout override for pickers
This PR removes a custom style override for isRtl: true. It was causing layout issues in RTL mode, and is not needed, the default layout behaves correctly under dir="rtl" without extra overrides.
Tested in both RTL and LTR: layout now renders as expected.
Bug reproduction
https://github.com/user-attachments/assets/e1c2961d-865a-49c4-9ea0-92b71a865814
Demo (fixed)
https://github.com/user-attachments/assets/81cc08cd-b570-4aef-bc90-ac778f08b2ec