I built my own multi-selecting code to use with react-beautiful-dnd but I can't seem to disable the outline. It seems to be built into the draggable component. It only seems to happen when I shift + click on an item in the list.enter image description here
<Draggable key={_id} draggableId={`${_id} + ${menu}`} index={index} isDragDisabled={false} >
{(provided) => (
<Card
className="noselect"
onClick={(e) => handleClick(e, menu, index)}
sx={{
display: "flex",
flexDirection: "column",
justifyContent: "space-between",
height: 60,
width: 400,
marginTop: 1,
alignItems: "center",
backgroundColor: selected ? theme.palette.third.main : "white",
}}
ref={provided.innerRef}
{...provided.draggableProps}
{...provided.dragHandleProps}
>
<Divider
sx={{
backgroundColor: moveSelectedToggle ? "black" : "",
width: "100%",
}}
/>
<Grid container sx={{ alignItems: "center" }}>
<Grid
item
xs={2}
sx={{
backgroundColor: getColor("bg"),
borderRadius: 15,
maxWidth: 30,
height: 30,
display: "flex",
alignItems: "center",
justifyContent: "center",
marginRight: 2,
}}
>
<Typography color={getColor("text")} sx={{}}>
{index + 1}
</Typography>
</Grid>
<Grid item xs={7}>
<Typography>{SADDRESS}</Typography>
</Grid>
<Grid item xs={3}>
<Box sx={{display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center'}}>
<Typography>{ROUTXT}</Typography>
<Typography>{SEQUENCE}</Typography>
</Box>
</Grid>
</Grid>
<Divider />
</Card>
)}
</Draggable>