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.

@swetha : Can I do the same thing between two tables ? i.e. dragging from left table and dropping the row to right table in material-ui ? You have any code sample of it ? https://stackoverflow.com/questions/63738982/material-ui-drag-and-drop-table-row-to-other-table — solveit, Oct 06 '20 at 12:06

score 3 · Accepted Answer · answered Mar 19 '20 at 13:48

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 />

Issue in React beautiful dnd with Material UI list

1 Answers1

Solution

Screenshot