In my menu I have a text field and a button. The text field type is number type. So when I click on the text field and click the arrow up and down, I want it to value to increase and decrease. But instead of that happening, it's selecting the menu items. This is the code.
<Menu
anchorEl={anchorEl}
open={open}
onClose={handleClose}
PaperProps={{
elevation: 0,
sx: {
overflow: "visible",
filter: "drop-shadow(0px 2px 8px rgba(0,0,0,0.32))",
mt: 1.5,
"& .MuiAvatar-root": {
width: 32,
height: 32,
ml: -0.5,
mr: 1,
},
"&:before": {
content: '""',
display: "block",
position: "absolute",
top: 0,
right: 14,
width: 10,
height: 10,
bgcolor: "background.paper",
transform: "translateY(-50%) rotate(45deg)",
zIndex: 0,
},
},
}}
transformOrigin={{ horizontal: "right", vertical: "top" }}
anchorOrigin={{ horizontal: "right", vertical: "bottom" }}
>
<MenuItem>
<TextField
label="Quantity"
type="number"
InputProps={{
inputProps: { min: "0", step: "1" },
}}
size="small"
sx={{ width: "120px" }}
value={editingItem.quantity}
onChange={(e) =>
setEditingItem({ ...editingItem, quantity: e.target.value })
}
/>
</MenuItem>
<MenuItem>
<Button
variant="contained"
size="small"
onClick={updateItem}
fullWidth
>
Save
</Button>
</MenuItem>
</Menu>
I tried wrapping the menu items in <MenuList/> and used the option autoFocusItem={false} but it's not working.
I have also investigated ways to disable the behavior of the arrow keys on MUI's and components, but concluded that there are no MUI props or other methods to disable the behavior. Instead, what I did was replace with a regular . The props for and its functionality are very similar to hopefully all you'll need to do is use the List component.
Related
I am using MUI with react. The dropdown menu is not aligning correctly. I am following https://mui.com/material-ui/react-menu/#account-menu document.
My text code:
//** A styled component **//
const StyledToolbar = styled(Toolbar)({
display: "flex",
justifyContent: "space-between",
backgroundColor: "#1e8e3e",
});
//** States **//
const [anchorEl, setAnchorEl] = useState(false);
const open = Boolean(anchorEl);
//** Actual Menu code **//
<Menu
id="account-menu"
anchorEl={anchorEl}
keepMounted
open={open}
getContentAnchorEl={null}
onClose={(e) => setAnchorEl(false)}
onClick={(e) => setAnchorEl(false)}
anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
transformOrigin={{ horizontal: 'right', vertical: 'top' }}
PaperProps={{
elevation: 0,
sx: {
overflow: 'visible',
filter: 'drop-shadow(0px 2px 8px rgba(0,0,0,0.32))',
mt: 1.5,
'& .MuiAvatar-root': {
width: 32,
height: 32,
ml: -0.5,
mr: 1,
},
'&:before': {
content: '""',
display: 'block',
position: 'absolute',
top: 0,
right: 14,
width: 10,
height: 10,
bgcolor: 'background.paper',
transform: 'translateY(-50%) rotate(45deg)',
zIndex: 0,
},
},
}}
>
<MenuItem>
<Typography variant="span">John K.</Typography>
</MenuItem>
<Divider />
<MenuItem>
<Avatar
sx={{ bgcolor: green[500], margin: ".5rem", width: 24, height: 24 }}
/>
Profile
</MenuItem>
<MenuItem>
<ListItemIcon sx={{ color: green[500], margin: ".5rem" }}>
<Settings fontSize="small" />
</ListItemIcon>
Settings
</MenuItem>
<Divider />
<MenuItem onClick={handleSignOut}>
<ListItemIcon sx={{ color: "#f50057", margin: ".5rem" }}>
<Logout fontSize="small" />
</ListItemIcon>
Logout
</MenuItem>
{error && <span className="span">Something went wrong!</span>}
</Menu>
If I am using the anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }} the Menu is starting from the bottom of the window:
If I am using the anchorOrigin={{ horizontal: 'right', vertical: 'top' }} the Menu is starting from the top of the window but from the middle of the user profile image:
For many people, applying getContentAnchorEl={null} fixed the issue but for me its not working. I am using MUI v5.10.0
You need to specify an element to work as a reference, like an anchor, for the Menu to open from it. Or else it will just show in an edge of the page depending the anchorOrigin property settings you specify on the Menu component.
<>
<Button
id="basic-button"
aria-controls={open ? "basic-menu" : undefined}
aria-haspopup="true"
aria-expanded={open ? "true" : undefined}
onClick={handleClick}
>
Menu
</Button>
<Menu
id="account-menu"
anchorEl={anchorEl}
keepMounted
open={open}
onClose={(e) => setAnchorEl(false)}
onClick={(e) => setAnchorEl(false)}
anchorOrigin={{ horizontal: "right", vertical: "bottom" }}
transformOrigin={{ horizontal: "right", vertical: "top" }}
PaperProps={{
elevation: 0,
sx: {
overflow: "visible",
filter: "drop-shadow(0px 2px 8px rgba(0,0,0,0.32))",
mt: 1.5,
"& .MuiAvatar-root": {
width: 32,
height: 32,
ml: -0.5,
mr: 1
},
"&:before": {
content: '""',
display: "block",
position: "absolute",
top: 0,
right: 14,
width: 10,
height: 10,
bgcolor: "background.paper",
transform: "translateY(-50%) rotate(45deg)",
zIndex: 0
}
}
}}
>
<MenuItem>
<Typography variant="span">John K.</Typography>
</MenuItem>
<Divider />
<MenuItem>
<Avatar
sx={{ bgcolor: "green", margin: ".5rem", width: 24, height: 24 }}
/>
Profile
</MenuItem>
<MenuItem>
<ListItemIcon sx={{ color: "green", margin: ".5rem" }}>
<Settings fontSize="small" />
</ListItemIcon>
Settings
</MenuItem>
<Divider />
<MenuItem
>
<ListItemIcon sx={{ color: "#f50057", margin: ".5rem" }}>
<Logout fontSize="small" />
</ListItemIcon>
Logout
</MenuItem>
</Menu>
<>
Here is the working codesanbox
Current target was missing in the code. After applying the following code, able to fix it:
const handleClick = (event) => {
setAnchorEl(event.currentTarget);
};
<Button
id="basic-button"
aria-controls={open ? "basic-menu" : undefined}
aria-haspopup="true"
aria-expanded={open ? "true" : undefined}
onClick={handleClick} /* Need to include this to set the target pointer */
>
And remove getContentAnchorEl={null} entry from the <Menu>. Else it may generate the following error:
Warning: React does not recognize the `getContentAnchorEl` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `getcontentanchorel` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
If I autofocus the textfield, it loses focus once I click into the modal.
I place the modal here
<NewOrgModal open={open} handleClose={handleClose} />
<Drawer
variant='permanent'
sx={{
display: { xs: 'none', sm: 'block' },
'& .MuiDrawer-paper': {
boxSizing: 'border-box',
width: 110,
// backgroundColor: '#0f041c',
backgroundColor: '#180D24',
},
overflow: 'scroll',
}}
open
>
And the TextField is in the Modal
<Modal
sx={{ position: 'absolute', top: '33%', left: '33%' }}
open={open}
onClose={handleClose}
>
<Card
sx={{
width: 600,
height: 300,
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
}}
>
<Typography marginBottom={3} variant='h4' fontWeight='600'>
Create Org
</Typography>
<TextField
onKeyDown={(e) => (e.key === 'Enter' ? createOrg() : null)}
id='orgName'
onChange={(e) => setOrgName(e.target.value)}
value={orgName}
sx={{
width: 300,
input: { textAlign: 'center', padding: 1, fontSize: 20 },
}}
placeholder='My Awesome Org 🙂'
/>
<Button
variant='contained'
onClick={createOrg}
sx={{
marginTop: 2,
borderRadius: 0,
boxShadow: 'none',
width: 300,
fontSize: 16,
fontWeight: 600,
}}
>
Submit
</Button>
</Card>
</Modal>
Is there a way to keep the textfield focused after clicking the button that opens the modal? If so, would there be any repercussions on having the textfield continue to focus after a specific action? e.g if I were to have other textfields in the future, would I need to think about other ways to not force the focus on the textfield in the modal?
You can autofocus on text field like this:
<TextField autoFocus></TextField>
You can use ref and on the modal open action, you can do ref.current.focus() like this. try this way once
Reactjs,MaterialUI
I am using reactjs and material ui in my project and i want to change color of StepConnector and Button inside Step if it is active or completed.i want to change color of StepConnector and Button if next step is Active.Below is the code i am using:
const Cart = () => {
return (
<Box
sx={{
minHeight: "800px",
bgcolor: "#F6F9FC",
width: "100%",
}}
>
<Stepper
nonLinear
activeStep={activeStep}
sx={{
maxWidth: "60%",
marginLeft: "10%",
"& .MuiStepConnector-line": {
borderColor: "#085E7D",
borderTopWidth: "4px",
minWidth: "30px",
},
}}
>
{steps.map((label, index) => (
<Step key={label} sx={{ padding: "0px" }}>
<Button
variant="contained"
onClick={handleStep(index)}
completed={completed[index]}
sx={{
bgcolor: "#085E7D",
borderRadius: "25px",
"&:hover": {
backgroundColor: "#085E7D",
boxShadow: "none",
textShadow: "none",
margin: "0px",
},
}}
>
{label}
</Button>
</Step>
))}
</Stepper>
</Box>
);
};
export default Cart;
Please help me in my code..
Your code snippet doesn't really give enough context to fully answer your question (not sure how the buttons are working?). However if I use this example from the MUI website, the following change to the Stepper results in the connector lines changing color when the next step is "active" and "complete".
<Stepper
activeStep={activeStep}
sx={{
"& .MuiStepConnector-line": {
borderTopWidth: "4px",
},
"& .MuiStepConnector-root.Mui-active .MuiStepConnector-line": {
borderColor: "red",
},
"& .MuiStepConnector-root.Mui-completed .MuiStepConnector-line": {
borderColor: "green",
},
}}
>
I need to remove the background shadow in the Material-UI dialog. But I can't find the way from API. Anyone can help me with that.
I need to remove this shadow...
<div id={"Location_Massage"} style={{ height: "10px !important" }}>
<Dialog
className={classes.location_verify_dialog}
fullScreen={fullScreen}
open={open}
style={{
marginTop: -470,
marginLeft: 460
}}
onClose={handleClose}
aria-labelledby="responsive-dialog-title"
>
<DialogContent>
<DialogContentText
style={{
borderRadius: 12,
height: "10px !important",
width: 170
}}
>
<div style={{ fontSize: 15, fontWeight: 700 }}>Me Labs</div>
</DialogContentText>
</DialogContent>
<DialogActions>
<Button
style={{ borderRadius: 15, left: -6, top: -15 }}
onClick={handleClose}
color="primary"
variant={"outlined"}
>
Cancel
</Button>
<Button
style={{ borderRadius: 15, left: -4, top: -15 }}
onClick={handleClose}
color="primary"
variant={"contained"}
>
Submit
</Button>
</DialogActions>
</Dialog>
</div>
I found the answer to my own question.
if you need to remove background from dialog just add these props.
hideBackdrop={true}
Dialog uses Paper component under-the-hood and provides a PaperProps prop to let you override the Paper properties including the elevation (which sets the Paper shadow).
EDIT: If you want to remove the Backdrop background color, you can use hideBackdrop, it's a Modal prop which the Dialog inherits from. But you should add some kind of border to be able to see the Dialog on the white background:
V5
<Dialog
open={open}
onClose={handleClose}
hideBackdrop
PaperProps={{
elevation: 0,
sx: {
border: "solid 1px gray"
}
}}
>
V4
const useStyles = makeStyles({
paper: {
border: "solid 1px gray"
}
);
<Dialog
open={open}
onClose={handleClose}
hideBackdrop
PaperProps={{
elevation: 0,
className: classes.paper
}}
>
Live Demo
There are a couple of options, using which you can hide the background shadow of the Dialog component.
Option 1
You can use the location_verify_dialog class and select the paper class in the makeStyles or useStyles.
location_verify_dialog: {
"& .MuiDialog-paper": {
boxShadow: "none"
}
},
Option 2
You can assign a new class to the paper key in the classes object for the Dialog component and remove the background shadow.
paper: {
boxShadow: "none"
}
Dialog component
<Dialog
className={classes.location_verify_dialog}
fullScreen={false}
open={open}
style={{
marginTop: -470,
marginLeft: 460,
boxShadow: "none"
}}
onClose={handleClose}
aria-labelledby="responsive-dialog-title"
classes={{ paper: classes.paper }} // this is the class prop
>
Here is the sandbox link with both of the options.
This is my code for the badge:
<Tab
label={
<Badge
badgeContent={size}
color="secondary"
showZero
className={classes.badge}
anchorOrigin={{
vertical: "top",
horizontal: "right",
}}
>
<Typography>Pending</Typography>
</Badge>
}
{...a11yProps(0)}
/>
This is the styles for the badge. However, this will also move the typography
badge: {
marginLeft: "1rem",
},
It can be displayed, however, the anchor tag for the badge is overlapping the words or the label. How can I fix this?
badge: {
position: absolute;
top: '8px'; //you can change according to your use
},
Else
anchorOrigin={{
vertical: "top",
horizontal: "right",
position: "absolute",
top: "8px"
}}
Please let me know in a comment if not work