When flex wrap is enabled, the droppable doesn't recognize that a new line has appeared, and I can only drop the item on the line above. Does anyone know if it's possible to achieve this with this library? I would like it to have the normal behavior of expanding the drop area when line breaks.
I'm new to the company and I've already taken on this problem to solve. I would greatly appreciate anyone who can help me...
<DragDropContextWrap
alternatives={words}
state={state}
setState={setState}
currentProgram={currentProgram}
>
<Flex flexDir={"column"} gap={3} mt="32px">
<Droppable droppableId="sentence" direction="horizontal">
{(provided) => (
<Flex
ref={provided.innerRef}
minW={["300px", "625px"]}
minH={"70px"}
bg="white"
p="8px 16px"
borderRadius="8px"
border="1.5px solid #CBD5E0"
flexWrap="wrap"
alignItems="flex-start"
>
{state.sentence.map((item, index) => (
<Draggable
key={item.id}
draggableId={String(item.id)}
index={index}
>
{(provided, snapshot) => (
<Flex
ref={provided.innerRef}
{...provided.draggableProps}
{...provided.dragHandleProps}
p="8px 8px"
borderRadius="8px"
backgroundColor={snapshot.isDragging ? "#ff5e5e" : ""}
minWidth="fit-content"
>
<Text32px color="primary">{item.text}</Text32px>
</Flex>
)}
</Draggable>
))}
{provided.placeholder}
</Flex>
)}
</Droppable>
</Flex>
<DragOptionsBox
alternatives={state.items}
droppableId="items"
inactiveDrag={inactiveDrag}
/>
</DragDropContextWrap>
I am using Chakra UI for styling.
