Develop Reference

How to disable ripple effect on primary action in react material lists

I was trying to have two action buttons on the left and right end of the list component.
on click of secondary action (right side delete icon) the ripple is limited to the only icon.
on click of primary action(left delete icon) the ripple effect is on the whole row.
Expected Behaviour :
I want the ripple effect on the primary, similar to that of the secondary action button.
And important I cannot disable the text ripple effect as temporary solution.
Code Sample:
Code-Sandbox link
import React from "react";
import { makeStyles } from "#material-ui/core/styles";
import List from "#material-ui/core/List";
import ListItem from "#material-ui/core/ListItem";
import ListItemIcon from "#material-ui/core/ListItemIcon";
import ListItemText from "#material-ui/core/ListItemText";
import ListItemSecondaryAction from "#material-ui/core/ListItemSecondaryAction";
import DeleteIcon from "#material-ui/icons/Delete";
import IconButton from "#material-ui/core/IconButton";
const useStyles = makeStyles((theme) => ({
root: {
width: "100%",
maxWidth: 360,
backgroundColor: theme.palette.background.paper
}
}));
export default function SelectedListItem() {
const classes = useStyles();
const [selectedIndex, setSelectedIndex] = React.useState(1);
const handleListItemClick = (event, index) => {
setSelectedIndex(index);
};
return (
<div className={classes.root}>
<List component="nav" aria-label="main mailbox folders">
<ListItem
button
selected={selectedIndex === 0}
onClick={(event) => handleListItemClick(event, 0)}
>
<ListItemIcon>
<IconButton edge="end" aria-label="delete">
<DeleteIcon />
</IconButton>
</ListItemIcon>
<ListItemText primary="Inbox" />
<ListItemSecondaryAction>
<IconButton edge="end" aria-label="delete">
<DeleteIcon />
</IconButton>
</ListItemSecondaryAction>
</ListItem>
<ListItem
button
selected={selectedIndex === 1}
onClick={(event) => handleListItemClick(event, 1)}
>
<ListItemIcon>
<IconButton edge="end" aria-label="delete">
<DeleteIcon />
</IconButton>
</ListItemIcon>
<ListItemText primary="Drafts" />
<ListItemSecondaryAction>
<IconButton edge="end" aria-label="delete">
<DeleteIcon />
</IconButton>
</ListItemSecondaryAction>
</ListItem>
</List>
</div>
);
}

I think it's because is used to add secondary action to button so when you click on the secondary action area it prevent primaryAction to happen. So in your case when you click on right icon it contains the ripple affect inside ListItemSecondaryAction area. If you want to disable ripple on the List you can add prop 'disableRipple' on your ListItem and it will be disabled but if you want it conditional ie. when user clicks on icon ripple should happen only on icon and if clicked on button only in button than you can try stop propagation when clicked on button ( might not work ) but you can give it a try.
I've created a work around sharing codesandbox link with you
https://codesandbox.io/s/material-demo-forked-i7k7e?file=/demo.js
<ListItem
button
disableRipple
selected={selectedIndex === 0}
onClick={(event) => handleListItemClick(event, 0)}
style={{ position: "relative" }}
>
<div style={{ zIndex: 1 }}>
<ListItemIcon>
<IconButton edge="end" aria-label="delete">
<DeleteIcon />
</IconButton>
</ListItemIcon>
<ListItemText primary="Inbox" />
<ListItemSecondaryAction>
<IconButton edge="end" aria-label="delete">
<DeleteIcon />
</IconButton>
</ListItemSecondaryAction>
</div>
<ButtonBase
style={{
position: "absolute",
bottom: 0,
top: 0,
left: 0,
right: 0,
width: "100%",
zIndex: 0
}}
/>
</ListItem>

React/Material UI Drawer With Nested List Items Closes on Click

I am using Material-UI for my React project and having issues with getting the drawer to function properly when I add in nested list items. Everything was working great until I added those in. I believe the root cause is that by clicking on the dropdown menu and changing the state of the list item to be open I'm causing the application to re-render. Not sure how to solve this.
Problem: Nested list items close the drawer automatically when you click the top level. The user then has to open the drawer again to see the list items in the drop down.
Desired Functionality: The user clicks the menu item to open the drawer. The user can click on "Leadership Triad" and see the menu items within while the drawer stays open. When the user clicks off, the drawer closes.
Code Sandbox
https://codesandbox.io/s/material-ui-nested-menu-forked-qqdiv
My Code
import React, { useState } from "react";
import { makeStyles } from "#material-ui/core/styles";
import AppBar from "#material-ui/core/AppBar";
import Toolbar from "#material-ui/core/Toolbar";
import Typography from "#material-ui/core/Typography";
import IconButton from "#material-ui/core/IconButton";
import MenuIcon from "#material-ui/icons/Menu";
import Drawer from "#material-ui/core/Drawer";
import List from "#material-ui/core/List";
import Divider from "#material-ui/core/Divider";
import ListItem from "#material-ui/core/ListItem";
import ListItemIcon from "#material-ui/core/ListItemIcon";
import ListItemText from "#material-ui/core/ListItemText";
import InboxIcon from "#material-ui/icons/MoveToInbox";
import HomeIcon from "#material-ui/icons/Home";
import AccountCircle from "#material-ui/icons/AccountCircle";
import ExitToAppIcon from "#material-ui/icons/ExitToApp";
import ExpandLess from "#material-ui/icons/ExpandLess";
import ExpandMore from "#material-ui/icons/ExpandMore";
import PeopleIcon from "#material-ui/icons/People";
import BusinessIcon from "#material-ui/icons/Business";
import Menu from "#material-ui/core/Menu";
import MenuItem from "#material-ui/core/MenuItem";
import { Link as RouterLink } from "react-router-dom";
import Collapse from "#material-ui/core/Collapse";
const useStyles = makeStyles(theme => ({
root: { flexGrow: 1 },
menuButton: { marginRight: theme.spacing(2) },
title: { flexGrow: 1 },
list: { width: 250 },
nested: { paddingLeft: theme.spacing(4) },
}));
const Header = () => {
const [drawerOpen, setDrawerOpen] = useState(false);
const [anchorEl, setAnchorEl] = useState(null);
const [leadershipTriadMenuOpen, setLeadershipTriadMenuOpen] = useState(false);
const handleLeadershipTriadClick = () => {
setLeadershipTriadMenuOpen(!leadershipTriadMenuOpen);
};
const handleClick = event => {
setAnchorEl(event.currentTarget);
};
const handleClose = () => {
setAnchorEl(null);
};
const toggleDrawer = () => {
setDrawerOpen(!drawerOpen);
};
const classes = useStyles();
return (
<div className={classes.root}>
<AppBar position="static">
<Toolbar>
<IconButton
edge="start"
className={classes.menuButton}
color="inherit"
aria-label="menu"
onClick={() => toggleDrawer()}
>
<MenuIcon />
<Drawer
anchor="left"
open={drawerOpen}
onClose={() => toggleDrawer()}
>
<div className={classes.list}>
<List>
<ListItem button component={RouterLink} to="/">
<ListItemIcon>
<HomeIcon color="primary" />
</ListItemIcon>
<ListItemText primary="Home" />
</ListItem>
<ListItem
button
onClick={() => handleLeadershipTriadClick()}
>
<ListItemIcon>
<HomeIcon color="primary" />
</ListItemIcon>
<ListItemText primary="Leadership Triad" />
{leadershipTriadMenuOpen ? (
<ExpandLess />
) : (
<ExpandMore />
)}
</ListItem>
<Collapse
in={leadershipTriadMenuOpen}
timeout="auto"
unmountOnExit
>
<List component="div" disablePadding>
<ListItem button className={classes.nested}>
<ListItemIcon>
<HomeIcon />
</ListItemIcon>
</ListItem>
</List>
</Collapse>
<ListItem button>
<ListItemIcon>
<InboxIcon color="primary" />
</ListItemIcon>
<ListItemText primary="Testing" />
</ListItem>
<ListItem button>
<ListItemIcon>
<InboxIcon color="primary" />
</ListItemIcon>
<ListItemText primary="Testing" />
</ListItem>
</List>
<Divider />
<List>
<ListItem
button
component={RouterLink}
to="/admin/companies"
>
<ListItemIcon>
<BusinessIcon color="primary" />
</ListItemIcon>
<ListItemText primary="Companies" />
</ListItem>
<ListItem
button
component={RouterLink}
to="/admin/users"
>
<ListItemIcon>
<PeopleIcon color="primary" />
</ListItemIcon>
<ListItemText primary="Users" />
</ListItem>
</List>
<Divider />
<List>
<ListItem button component={RouterLink} to="/profile">
<ListItemIcon>
<AccountCircle color="primary" />
</ListItemIcon>
<ListItemText primary="Profile" />
</ListItem>
<ListItem button component={RouterLink} to="/logout">
<ListItemIcon>
<ExitToAppIcon color="primary" />
</ListItemIcon>
<ListItemText primary="Logout" />
</ListItem>
</List>
</div>
</Drawer>
</IconButton>
<Typography variant="h6" className={classes.title}>
Leadership Program
</Typography>
<IconButton color="inherit" onClick={handleClick}>
<AccountCircle />
</IconButton>
<Menu
id="admin-menu"
anchorEl={anchorEl}
keepMounted
open={Boolean(anchorEl)}
onClose={handleClose}
>
<MenuItem
component={RouterLink}
to="/profile"
onClick={handleClose}
>
Profile
</MenuItem>
<MenuItem
onClick={handleClose}
component={RouterLink}
to="/logout"
>
Logout
</MenuItem>
</Menu>
</Toolbar>
</AppBar>
</div>
);
};
export default Header;

Have you tried surrounding the IconButton with a ListItemSecondaryAction?
<ListItemSecondaryAction>
<IconButton onClick={handleOnClick}>
{openState ? <ExpandLess /> : <ExpandMore />}
</IconButton>
</ListItemSecondaryAction>
I was trying to do something similar, where a list item had two clickable areas with two different actions: click the ListItem (to go to a page) or click the IconButton (to expand the ListItem) to display nested ListItems. Without this ListItemSecondaryAction, when I would click on a list item, it would both route and expand the ListItem, which was not desirable.
Adding the SecondaryAction separated click actions of the ListItem and the IconButton. The documentation isn't great, so it took me a while to understand the purpose, but it's here.

Material-UI popover triggered by onMouseOver is blocking onClick event of button - React.js

This is Header.js where I have the button <ReactSvg>, inside <IconButton> when you click it, it will change the page theme with the switchTheme() function. When you hover over the button it also has a popover where it declares the function of the button (ex. switch theme).
For some reason I hover the button the popover comes out but doesn't let me click on the button even if I click very fast and vigorously. Somehow the popover has disabled the button.
Header file where the button is rendered:
import React, { useState } from 'react'
import ReactSvg from './reactSvg'
import { Box, Typography, Link, Container, IconButton } from '#material-ui/core'
import PhoneIcon from '#material-ui/icons/Phone'
import EmailIcon from '#material-ui/icons/Email'
import GitHubIcon from '#material-ui/icons/GitHub'
import LinkedInIcon from '#material-ui/icons/LinkedIn'
import { useStyles } from '../styles/customStyles'
import Image from 'material-ui-image'
import PopOver from './PopOver'
const styles = {
image: {
maxWidth: 200,
minWidth: 200,
},
}
export default function Header({ switchTheme }) {
const classes = useStyles()
const [anchorEl, setAnchorEl] = useState(null)
const handleTheme = () => {
switchTheme()
}
const handleHover = (e) => {
setAnchorEl(e.currentTarget)
}
return (
<>
<Box>
<IconButton onClick={() => handleTheme()} onMouseOver={(e) => handleHover(e)}>
<ReactSvg />
</IconButton>
<Typography variant="h3" color="primary">
Staz Christodoulakis
</Typography>
<Typography variant="body1" color="primary">
Software Engineer · Web/App
</Typography>
<hr className="solid" />
<Box
display="flex"
alignItems="center"
justifyContent="center"
className={classes.root}
flexWrap="wrap"
>
<Link color="secondary" variant="body1" href="tel: 650-409-6202">
<Box display="flex">
<PhoneIcon /> 650 409 6202
</Box>
</Link>
<Link color="secondary" variant="body1" href="mailto: staz.christo#gmail.com">
<Box display="flex">
<EmailIcon /> staz.christo#gmail.com
</Box>
</Link>
<Link href="https://github.com/stazcp" color="secondary" variant="body1">
<Box display="flex">
<GitHubIcon /> github.com/stazcp
</Box>
</Link>
<Link href="https://www.linkedin.com/in/staz-christo" color="secondary" variant="body1">
<Box display="flex">
<LinkedInIcon /> linkedin.com/in/staz-christo
</Box>
</Link>
</Box>
</Box>
<PopOver anchorEl={anchorEl} setAnchorEl={setAnchorEl} />
</>
)
}
Popover:
import React, { useState, useEffect } from 'react'
import { makeStyles } from '#material-ui/core/styles'
import Popover from '#material-ui/core/Popover'
import Typography from '#material-ui/core/Typography'
import Button from '#material-ui/core/Button'
const useStyles = makeStyles((theme) => ({
typography: {
padding: theme.spacing(2),
},
}))
export default function SimplePopover({ anchorEl, setAnchorEl }) {
const classes = useStyles()
const handleClose = () => {
setAnchorEl(null)
}
const open = Boolean(anchorEl)
const id = open ? 'simple-popover' : undefined
return (
<div>
<Popover
id={id}
open={open}
anchorEl={anchorEl}
onClose={handleClose}
anchorOrigin={{
vertical: 'bottom',
horizontal: 'center',
}}
transformOrigin={{
vertical: 'top',
horizontal: 'center',
}}
>
<Typography className={classes.typography}>
Click on React Symbol to change theme!
</Typography>
</Popover>
</div>
)
}
Why is that the onMouseOver event blocking the onClick event?

Can you try stopPropagation?
const handleHover = (e) => {
e.stopPropagation();
setAnchorEl(e.currentTarget)
}

So I found a solution to my problem by using a Tooltip provided by Material UI.
https://material-ui.com/components/tooltips/
Like this:
<Tooltip title="Click Me!" placement="right" arrow>
<IconButton
onClick={() => handleTheme()}
// onMouseOver={(e) => handleHover(e)}
>
<GetIcon icon={reactLogo} className="reactLogo" />
</IconButton>
</Tooltip>
if anyone has managed to use different methods for mouse events on Material UI buttons please post here.
Thanks!

Uncaught Invariant Violation: Minified React error

I tried to assign div side by side in my react website. However,I received the error Uncaught Invariant Violation: Minified React error.
This is my toolbar in my react website
let EnhancedTableToolbar = props => {
const { numSelected, classes ,deletefunc} = props;
return (
<Toolbar
className={classNames(classes.root, {
[classes.highlight]: numSelected > 0,
})}
>
<div className={classes.title}>
{numSelected > 0 ? (
<Typography color="inherit" variant="subtitle1">
{numSelected} selected
</Typography>
) : (
<Typography variant="h6" id="tableTitle">
User List
</Typography>
)}
</div>
<div className={classes.spacer} />
<div className={classes.actions}>
{numSelected > 0 ? (
<div>
<div style="width: 100px; float:right;">
<Tooltip title="Delete">
<IconButton aria-label="Delete">
<DeleteIcon onClick={() => { if (window.confirm('Are you sure you wish to delete '+numSelected +' item?')) {deletefunc()} } }>
</DeleteIcon>
</IconButton>
</Tooltip>
</div>
<div style="width: 100px; float:right;">
<Tooltip title="Edit">
<IconButton aria-label="Edit">
<EditIcon>
</EditIcon>
</IconButton>
</Tooltip>
</div>
</div>
) : (
<Tooltip title="Filter list">
<IconButton aria-label="Filter list">
<FilterListIcon />
</IconButton>
</Tooltip>
)}
</div>
</Toolbar>
);
};
I received the error when I set the width to 100px and float to right in my delete button and edit button. The code will work if I never set the width and float. However,it div by up down instead of side by side. Anyone know how to solve this issue?

That is not how you define inline styles in JSX.
The style attribute accepts a JavaScript object with camelCased
properties rather than a CSS string.
Try this instead:
<div style={{ width: '100px', float: 'right' }}>

Combine an AppBar with a Drawer in material ui

I have an AppBar component and I want to combine it with a drawer, this is the AppBar code:
import React from "react";
import PropTypes from "prop-types";
import { withStyles } from "material-ui/styles";
import AppBar from "material-ui/AppBar";
import Toolbar from "material-ui/Toolbar";
import Typography from "material-ui/Typography";
import Button from "material-ui/Button";
import IconButton from "material-ui/IconButton";
import MenuIcon from "material-ui-icons/Menu";
import TemporaryDrawer from "./Drawer";
const styles = {
root: {
width: "100%"
},
flex: {
flex: 1
},
menuButton: {
marginLeft: -12,
marginRight: 20
},
};
function ButtonAppBar(props) {
const { classes } = props;
return (
<div className={classes.root}>
<TemporaryDrawer/>
<AppBar position="static">
<Toolbar>
<IconButton className={classes.menuButton} color="inherit" aria-label="Menu">
<MenuIcon />
</IconButton>
<Typography variant="title" color="inherit" className={classes.flex}>
Title
</Typography>
<Button color="inherit">Drawer</Button>
</Toolbar>
</AppBar>
</div>
);
}
ButtonAppBar.propTypes = {
classes: PropTypes.object.isRequired
};
export default withStyles(styles)(ButtonAppBar);
Currently I'm using material-ui v1.0.0-beta.33, what I want is to open a drawer on the left side when click on the Button I have in AppBar but I have no idea how to do this.
I'll appreciate the help on this.

If I understand you correctly you can do it this way - store the boolean value that indicates is the drawer is opened in the state of your component:
state = { drawerIsOpen: false }
You will change it when user clicks on your Button:
handleDrawerOpen = () => {
this.setState({ drawerIsOpen: true });
};
Your render method should look like this:
render() {
const { classes } = this.props;
return (
<div className={classes.root}>
<AppBar position="static">
<Toolbar>
<IconButton className={classes.menuButton} color="inherit" aria-label="Menu">
<MenuIcon />
</IconButton>
<Typography variant="title" color="inherit" className={classes.flex}>
Title
</Typography>
<Button onClick={this.handleDrawerOpen} color="inherit">Drawer</Button>
</Toolbar>
</AppBar>
<Drawer
variant="persistent"
classes={{
paper: classes.drawerPaper,
}}
open={this.state.drawerIsOpen}
>
<div className={classes.drawerHeader}>
<IconButton onClick={this.handleDrawerClose}>
<ChevronLeftIcon />
</IconButton>
</div>
<div className={classes.drawerInner}>
<p>drawer content</p>
</div>
</Drawer>
</div>
);
}
Check this simplified demo (see demo.js file).