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

Question

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>
  );
}

Answer 1

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>