Issue in React beautiful dnd with Material UI list

Question

I am trying to build a rearrange-able material UI List with react beautiful dnd. Everything is working fine except for the ListItemSecondaryAction in the list. (i.e) When I drag a list item, the ListItemText and the ListItemIcon are draggable. The ListItemSecondaryAction just remains in the same place and gets rearranged only when that particular item is dropped.

You can try out the same in the sandbox link: https://codesandbox.io/s/4qp6vjp319

Changing the position of the ListItemSecondaryAction did not solve the problem.

Answer 1

Solution

Move the IconButton out of the ListItemSecondaryAction fix this problem

• Change from

<ListItemText
  primary={item.primary}
  secondary={item.secondary}
/>
<ListItemSecondaryAction>
  <IconButton>
    <EditIcon />
  </IconButton>
</ListItemSecondaryAction>

• To

<ListItemText
  primary={item.primary}
  secondary={item.secondary}
/>
<ListItemIcon>
  <IconButton>
    <EditIcon />
  </IconButton>
</ListItemIcon>
<ListItemSecondaryAction />

---

Screenshot

---