prevent inner elements of renderItem to initiate drag and drop

[gsavvidis96]

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

[ylysenko78]

<div style={{ cursor: "auto", userSelect: "text" }} role="button" >text</div>