1

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>
David Haas
  • 11
  • 1

0 Answers0