How to have two Secondary Actions in react material, One on left corner and one on right without affecting the behaviour of secondary action

Question

I need to show two secondary action one on left end(eye icon) and one on right end(delete icon) of the list item. The position I can adjust by overriding css elements right & left.

The problem is Secondary action delete is also triggering the ListItem's onClick event. because in code the order is like below, first delete, and at last eye component is written.

code sandbox link https://codesandbox.io/s/problem-video-forked-oh65hb?file=/demo.js:2568-3179

                <ListItemSecondaryAction style={{ right: "11%", left: "auto" }}>
                  <IconButton
                    onClick={(event) => {}}
                    edge="end"
                    aria-label="delete"
                  >
                    <DeleteIcon />
                  </IconButton>
                </ListItemSecondaryAction>

                <ListItemSecondaryAction style={{ right: "auto", left: "11%" }}>
                  <IconButton edge="end" aria-label="delete">
                    {<VisibilityIcon id="entity" />}
                  </IconButton>
                </ListItemSecondaryAction>

So, clicking on eye will not trigger any extra onclick event but clicking on delete will do so. coz delete is not written as last element.

How to avoid this, How to have two secondary action buttons on left and right end of the list item without affecting behaviour.

Answer 1

I fixed it finally with e.stopPropagation()

<IconButton
                    onClick={(e) => {
                      e.stopPropagation();
                    }}
                    edge="end"
                    aria-label="delete"
                  >
                    {<VisibilityIcon id="entity" />}
                  </IconButton>