Material-UI input elements like TextField are not working / can not get the focus if they are inside a Popper inside a Dialog.
<Dialog open={true}>
...
<Popper open={true} style={{zIndex: 1500}}>
...
<TextField />
...
</Popper>
...
</Dialog>
The zIndex value for the Popper element is necessary to display Popper in front of the Dialog element.
Simple codesandbox example: https://codesandbox.io/s/input-inside-popper-inside-dialog-not-working-9y7rg
You can use the disableEnforceFocus property on Dialog (inherited from Modal) to fix this.
<Dialog open={true} disableEnforceFocus>
<SimplePopper />
</Dialog>
Related answer: CKEditor 4 having problem when used in Material UI dialog
Related
In my React application, I have an icon inside a div which opens a modal popup onClick.
Functionality is working fine but raised a Failed prop type error in the console.
Warning: Failed prop type: MUI: You are providing an onClick event listener to a child of a button element
Prefer applying it to the IconButton directly.
This guarantees that the whole will be responsive to click events
<Box width="90%" display="flex" justifyContent="center" mt={4}>
<IconButton>
<AddCircleOutlineOutlinedIcon
sx={{ color: "white", fontSize: "400%" }}
onClick={handleOpen}
/>
</IconButton>
</Box>
Here we are taking a box section for adding the button, inside that I have a Icon button and an icon which handles onClick action. I tried with moving the onClick action IconBUtton and Box also, but result is negative.
How can we solve this.
I want to show another Box component above Modal component. Both are material ui component.
There is Parent Box component and there is another Box component inside Parent Box component.
Thing I want to do is show the second/child Box component on the top.
Right now it seems like the second/child Box component is under the image.
You can click a open modal button and inspect modal.
You will see there will be <img />, <div></div> and <svg />
<div></div> should be Box component but I can't see it over the top.
return (
<div>
<Button onClick={handleOpen}>Open modal</Button>
<Modal
open={open}
onClose={handleClose}
aria-labelledby="modal-modal-title"
aria-describedby="modal-modal-description"
>
<Box // parent Box component
sx={{
...style,
width: width,
height: height
}}
className={classes.imageExpand}
>
<img
src="https://cdn.pixabay.com/photo/2022/06/13/15/36/grain-7260250__340.jpg"
alt="sample"
className={classes.imageExpand}
/>
<Box className={classes.conainer} /> // child Box component
<CloseIcon className={classes.closeIcon} />
</Box>
</Modal>
</div>
);
Attempts
1, set z-index:1000 and position:'relative'
2, set lower z-index to the parent component
3, z-index:'1000 !important'
4, set transform and opacity
None of them worked. Is there any other way to show <Box /> top?
I even tried to switch Box component to regular div tag and this also doesn't work.
Several MUI components utilize z-index, employing a default z-index scale in MUI that has been designed to properly layer drawers, modals, snackbars, tooltips, and more.
The z-index values start at an arbitrary number, high and specific enough to ideally avoid conflicts:
mobile stepper: 1000
fab: 1050
speed dial: 1050
app bar: 1100
drawer: 1200
modal: 1300
snackbar: 1400
tooltip: 1500
so you should use a z-index greater than 1300.
you can get more info at https://mui.com/material-ui/customization/z-index/
How to collapse Modal Material UI?
I'm using a Modal component mui and want to collapse the modal window? Tell me how to do it?
You mean close it?
Well, if that's the case this is how you do it.
<Dialog
onClose={() => setModal(false)}
>
<your divs here/>
</Dialog>
I have to fix buttons on the bottom of my Material-UI dialog. I mean buttons should be in the bottom of dialog all the time regardless dialog size, list size, etc.
so far I have tried position: "fixed", bottom: 0, they are not helpful.
Any suggestions?
I am using MaterialUI Grid (its not a table in the screen).
Mixing Material UI Dialog Components with HTML elements can short circuit proper flow of Material UI component.
What I had... footer buttons failed to fix to the bottom... notice the body message is in a HTML div and the footer is in a material UI DialogActions
<Dialog>
<div>body message</div>
<DialogActions>
<Button>Cancel</Button> <Button>Save</Button>
</DialogActions>
</Dialog>
I fixed it by inserting the body-message div into the Material UI DialogContent component... this made the DialogActions do what it was supposed to do (stay fixed at the bottom).
<Dialog>
<DialogContent>
<div>body message</div>
</DialogContent>
<DialogActions>
<Button>Cancel</Button> <Button>Save</Button>
</DialogActions>
</Dialog>
From the screenshot, it looks like you're displaying a Table in a Dialog.
From this conclusion it is suggested -
To embed your 'Table' component inside 'DialogContent'
The button should be right aligned on the Dialog, meaning your buttons
should be placed inside 'DialogActions'
I created a sandbox with some mock data (due to insufficient details in the question) - Have a look - https://codesandbox.io/embed/material-dialog-actions-qcrnx
OK, It was fixed by using MaterialGrid and adding some styles (display: "flex", height: "80px", justifyContent: "space-between")
Material UI ReactJS :does material UI support any autofocus feature on the popovers.
I want to set the focus on the popover, as soon as the material UI popover opens.
MaterialUI Popovers inherit the Modal API. Supposedly the disableAutoFocus property allows NOT focusing on Popover/Modal content, however I also am experiencing it NEVER focusing in the first place.
https://material-ui.com/api/modal/
On what do you want to set the focus ?
The "autoFocus" property should be set on some Popover content childs.
For example, we use the "autoFocus" property of Material-UI TextField for this :
https://material-ui.com/api/text-field/
Add the autoFocus property to the first form element in your popover.
<Popover
id={id}
open={open}
anchorEl={anchorEl}
onClose={handleClose}
>
<input type="text" autoFocus />
<Typography className={classes.typography}>
The content of the Popover.
</Typography>
</Popover>
https://stackblitz.com/edit/qbx44l?file=demo.js