1

I am using the react beautiful-dnd library for drag and drop. My issue is I have a text. I want my text to highlight when I double click on it. This is default behavior but when I use beautiful-dnd library and wrap my text with library code then I see only hand on text and I cant double click on it. Can anyone tell me how keep component draggable with text highlight on double click? I want to highlight specific area clicked text not whole text.

Here is my code:

const getItemStyle = (isDragging, draggableStyle) => ({
  // Some basic styles to make the items look a bit nicer
  userSelect: "none",
  margin: `0 0 ${grid}px 0`,
  padding: "24px 16px 24px 16px",
  // Change background colour if dragging
  background: isDragging ? "lightgreen" : "unset",
  // Styles we need to apply on draggables
  ...draggableStyle,
});

const getListStyle = (isDraggingOver) => ({
  background: isDraggingOver ? "lightblue" : "#f9f9f9",
  padding: grid,
  width: "100%",
});

<DragDropContext onDragEnd={onDragEnd}>
  <Droppable droppableId="droppable">
    {(provided, snapshot) => (
      <div
        {...provided.droppableProps}
        ref={provided.innerRef}
        style={getListStyle(snapshot.isDraggingOver)}
      >
        {items.map((item, index) => (
          <Draggable
            key={item.draggableId}
            draggableId={item.draggableId}
            index={index}
          >
            {(provided, snapshot) => (
              <div
                key={item.id}
                ref={provided.innerRef}
                {...provided.draggableProps}
                {...provided.dragHandleProps}
                style={getItemStyle(
                  snapshot.isDragging,
                  provided.draggableProps.style
                )}
              >
                This is my text
              </div>
            )}
          </Draggable>
        ))}
        {provided.placeholder}
      </div>
    )}
  </Droppable>
</DragDropContext>
sbolel
  • 3,486
  • 28
  • 45
Rana Faraz
  • 160
  • 12

1 Answers1

0

"I fixed the issue by removing {...provided.dragHandleProps} and passing it as a prop to the component where I have the dragging icon.

  <IconButton style={{ cursor: 'grabbing' }} {...draggable}>
            <DragIndicatorIcon />
          </IconButton>

i am receiving draggable as a props. this is props code draggable={provided.dragHandleProps} I also changed userSelect from 'none' to 'auto'."

Rana Faraz
  • 160
  • 12