Open
Description
Based on other issues I noticed that buttons are clickable, or elements with role="button". Although that is a partial fix, I have a use case where I dont want some inner elements of renderItem to initiate drag and drop. For example:
import { Stack, Typography } from "@mui/material";
import { useState } from "react";
import { List, arrayMove } from "react-movable";
const Test = () => {
const [items, setItems] = useState([
"item1",
"item2",
"item3",
"item4",
"item5",
]);
return (
<Stack sx={{ flexGrow: 1 }}>
<List
values={items}
renderList={({ children, props }) => {
return (
<Stack {...props} gap={1}>
{children}
</Stack>
);
}}
renderItem={({ value, props }) => {
return (
<Stack {...props} direction="row" gap={3}>
<Typography>{value}</Typography>
<Stack sx={{ backgroundColor: "grey.100" }} role="button">
<Typography>
Content that does not trigger drag and drop !!
</Typography>
</Stack>
</Stack>
);
}}
onChange={({ oldIndex, newIndex }) =>
setItems(arrayMove(items, oldIndex, newIndex))
}
/>
</Stack>
);
};
export default Test;
By adding role="button" in the inner Stack I am able to prevent the drag and drop but still I am not able to highlight text. Is there any workaround for that or a more generic solution to preventing drag and drop for inner items?
Thanks