We Keep Coding

DatePicker Overly hiding under modal using MUI with react

The Parent Component is MUI Page then modal which is also from MUI and then inside the modal, I'm rendering the DatePicker
// #mui
import { DatePicker } from '#mui/x-date-pickers';
That's how it is being rendered.
<Controller
name="createDate"
control={control}
render={({ field, fieldState: { error } }) => (
<DatePicker
label="Date create"
value={field.value}
onChange={(newValue) => {
field.onChange(newValue);
}}
renderInput={(params) => <TextField {...params} fullWidth error={!!error} helperText={error?.message} />}
/>
)}
/>
But the problem is that DatePicker overly displays under the modal. How can I make changes so that can be fixed?
I tried this question's solution but it didn't help. The reason might be these answers are not for the MUI DatePicker. So I need your help fixing this. Thanks.

change the zIndex for the modal component <Modal sx={{zIndex: 3}} ... >

Material UI Autocomplete list items have padding I can't get rid off

I have this Autocomplete component in a React app as:
<Autocomplete
placeholder="Enter Suburb"
id="custom-input-demo"
options={Suburbs.map((suburb) => suburb.suburb)}
onChange={(event,value) => addSuburb(value)}
onFocus={()=>scrollToSuburb()}
defaultValue={customer.suburb ? customer.suburb : ''}
renderInput={(params) => (
<div ref={params.InputProps.ref}>
<input style={{ width: 300 }} placeholder="Type.." type="text" {...params.inputProps} />
</div>
)}
/>
It appears with huge padding on the items as:
Render screenshot
I tried every possible way to alternate this style but wasn't able to.
What is the best way to style the Material UI react Autocomplete list?

How do you style custom data grid toolbar items?

I have this toolbar with 2 custom buttons and 3 imported material data grid toolbar components, I want them to match but preferably apply the material styles to my custom components yet I can't find a style import for them anywhere in their docs. But anyway I can get them to match would be huge. Does anyone have some advice?
const Toolbar = () => {
return (
<GridToolbarContainer>
<div
className={classes.toolbar}
onClick={() => {
toggleSearch();
}}
>
<SearchIcon />
<p>SEARCH</p>
</div>
<div
className={classes.toolbar}
onClick={() => {
bookmarkCases(selectedRows);
}}
>
<BookmarkBorderIcon />
<p>SAVE CASES</p>
</div>
<GridColumnsToolbarButton />
<GridDensitySelector />
<GridToolbarExport />
</GridToolbarContainer>
);
};

Instead of making an icon button out of a <div>, why not use the startIcon prop in an MUI <Button />, e.g.
From this:
<div
className={classes.toolbar}
onClick={() => {toggleSearch()}}
>
<SearchIcon />
<p>SEARCH</p>
</div>
to this:
<Button
className={classes.toolbar}
onClick={() => {toggleSearch()}}
startIcon={<SearchIcon />}
>Search
</Button>
All the styles should match because MUI DataGrid toolbar buttons are just MUI Buttons

After a bit of a struggle I found a solution. I was able to achieve a consistent style for all toolbar buttons by passing the styles through the DataGrid itself.
export const StyledDataDrid = styled(DataGridPremium)<DataGridPremiumProps>(({ theme }) => ({
'& .MuiDataGrid-toolbarContainer': {
'& .MuiButton-text': {
fontSize: '16px !important',
color: '#074682',
},
'& .MuiBadge-badge': {
backgroundColor: '#074682',
},
},
}));
Or you can style it on the DataGrid component using the sx property as explained in this issue: https://github.com/mui/mui-x/issues/3686#issuecomment-1018469717

OnBlur closing react component if clicked inside

I have created a React component using Material UI as below
<Popper
open={open}
anchorEl={anchorRef.current}
onBlur={handleToggle}
transition
disablePortal
>
<MenuList autoFocusItem={open}>
<MenuItem>Tom</MenuItem>
<MenuItem>Patt</MenuItem>
</MenuList>
<input type="text" name="Student" onChange={getStudent}></input>
</Popper>
In the above component i have MenuList and TextField. I tried to add onBlur={handleToggle} thinking that, it will close the component if clicked outside of it but its closing even when i am trying to add text in TextField using onChange={getStudent}, Why is it happening and how to close Component only if clicked outside of it? Thanks.

You can use ClickAwayListener component to detect whether the user is clicking outside of the Popover area.
<ClickAwayListener onClickAway={() => setOpen(false)}>
<span>
<Popper
open={open}
anchorEl={ref.current}
transition
disablePortal
>
<MenuList autoFocusItem={open}>
<MenuItem>Tom</MenuItem>
<MenuItem>Patt</MenuItem>
</MenuList>
<input
type="text"
name="Student"
/>
</Popper>
<Button variant="outlined" onClick={() => setOpen((o) => !o)} ref={ref}>
Nothing
</Button>
</span>
</ClickAwayListener>
Live Demo

Material UI Autocomplete with Avatar in textfield

Can I achieve avatar in the textfield of autocomplete material-ui component as the getOptionLabel prop only accepts a string and render option the expected UI is shown .i.e profile picture and Name, can we get the same thing i.e profile picture and name in the renderInput textField

You can return your custom component in renderInput props, and that custom can be a combination of icon and TextField Like this...
renderInput={(params, data) => (
<div style={{ position: "relative" }}>
{params.inputProps.value && (
<span
style={{
position: "absolute",
transform: "translateY(50%)",
marginLeft: "5px"
}}
>
{/* Write logic to have Icon from params.inputProps.value */}
{countryToFlag("AD")}
</span>
)}
<TextField
{...params}
label="Choose a country"
variant="outlined"
inputProps={{
...params.inputProps,
autoComplete: "new-password",
style: { paddingLeft: "20px" } // disable autocomplete and autofill
}}
/>
</div>
)}
As you can see I have provided the Absolute position span which will render the icon based on the selected value(I am still not able to find a way to access the options object).
Here is the complete and running sandbox project