react-dnd-beautiful placeholder dont work correctly (fixed bottom)

Viewed 11

I work on a trello like app with React I use react-dnd-beautiful and the placeholder bug, he stay stuck at the bottom of the column, and hide other cards Here is a video example (sorry for the quality) enter image description here

My provided.placeholder is in Droppable tag so I don't understand

 <DragDropContext onDragEnd={(result) => onDragEnd(result)}>
          {Object.entries(columns).map(([columnId, column]) => (
            <Droppable key={columnId} droppableId={columnId}>
              {(provided, snapshot) => (
                <div
                  className={`todo__list ${
                    snapshot.isDraggingOver ? "dragging" : ""
                  }`}
                >
                  <h2>{column.title}</h2>
                  <ul ref={provided.innerRef} {...provided.droppableProps}>
                    {column.items.map((item, index) => (
                      <TaskCard key={index} item={item} index={index} />
                    ))}
                    {provided.placeholder}
                  </ul>
                  <div className="todo__list__add">
                    <UilPlus />
                    Ajouter
                  </div>
                </div>
              )}
            </Droppable>
          ))}
        </DragDropContext>
0 Answers
Related