How do I prevent mui x-date-picker from being cutoff? - reactjs

Question

https://codesandbox.io/s/react-mui-forked-fpt0xl?file=/index.js
I'm trying to create a simple draggable dialog as shown above. The issue I'm having is that the label for the datepicker element is being cut off for some reason. I understand that I could style my way out of this, but I am trying to understand why the default stylings for MUI lead to this odd behavior. Full code for this component included below, working example demonstrating the problem above.
import * as React from 'react';
import Button from '#mui/material/Button';
import Dialog from '#mui/material/Dialog';
import DialogActions from '#mui/material/DialogActions';
import DialogContent from '#mui/material/DialogContent';
import { AdapterLuxon } from '#mui/x-date-pickers/AdapterLuxon';
import { DesktopDatePicker } from '#mui/x-date-pickers';
import { LocalizationProvider } from '#mui/x-date-pickers';
import { FormControl, InputLabel, Input, FormHelperText } from '#mui/material';
import DialogTitle from '#mui/material/DialogTitle';
import Paper, { PaperProps } from '#mui/material/Paper';
import Draggable from 'react-draggable';
import TextField from '#mui/material/TextField';
import { DateTime } from 'luxon';
function PaperComponent(props: PaperProps) {
return (
<Draggable
handle="#draggable-dialog-title"
cancel={'[class*="MuiDialogContent-root"]'}
>
<Paper {...props} />
</Draggable>
);
}
export default function DraggableDialog() {
const [postDate, setPostDate] = React.useState<DateTime | null>(
DateTime.now()
);
return (
<Dialog
open={true}
onClose={() => {}}
PaperComponent={PaperComponent}
aria-labelledby="draggable-dialog-title"
>
<DialogTitle style={{ cursor: 'move' }} id="draggable-dialog-title">
Add Story
</DialogTitle>
<DialogContent>
<FormControl>
<InputLabel htmlFor="story-title">Title</InputLabel>
<Input id="story-title" aria-describedby="story-title-text" />
<FormHelperText id="story-title-text">Enter title</FormHelperText>
</FormControl>
<LocalizationProvider dateAdapter={AdapterLuxon}>
<DesktopDatePicker
label="Date"
renderInput={(props) => <TextField {...props} />}
value={postDate}
onChange={(newValue: DateTime | null) => {
setPostDate(newValue);
}}
/>
</LocalizationProvider>
</DialogContent>
<DialogActions>
<Button autoFocus onClick={() => {}}>
Cancel
</Button>
<Button onClick={() => {}}>Add Story</Button>
</DialogActions>
</Dialog>
);
}

Answer 1

https://github.com/mui/material-ui/issues/34113
I raised this issue with the MUI team after realizing that the culprit code is something that assigns the first child of most containers (like DialogContent) a margin: 0 property. The label, in this example works by animating its position into that margin area, which for every other element is either 1.0 or 1.5em for the top, but for the first it isn't- it's 0. The recommendation from the repo managers was to style the first element with a local sx={{margin-top: 1.5}} as changing the default behavior would likely break many other designs and this isn't too intrusive.