A flag to disable removal of absolutely positioned elements
Author: alex-klimovCreated Apr 5, 2025Updated Apr 6, 2025
Labelsuntriagedunconfirmed-bug
Issue
In my case, draggable elements have relatively positioned elements, which anchor absolutely positioned elements.
These absolutely positioned elements are getting removed from the cloned element by react-beautiful-dnd. So I have to add them back to prevent broken UX during dragging and for a significant time after.
Here is a piece of working code. I can share the video of UX in action, if needed.
<DragDropContext
onDragEnd={(result) => {}}
onDragStart={(start) => {
// add text element to DOM since react-beautiful-dnd removes it during drag
const droppableId = start.source.droppableId;
ensure_task_text(droppableId, total_shifts, text_to_right_trigger);
}}
key={`dnd_context_${resource.id}`}
>
{/* <Droppable droppableId={`machine-${resource.id}`} renderClone={render_task_row}> */}
<Droppable droppableId={`machine-${resource.id}`}>There are two problems with this:
ensure_task_textis rather complex and fragile to maintain.react-beautiful-dndafter some time inserts text node back into DOM, creating duplicates, that need to cleaned.
Suggested solution?
Simply allowing to disable the removal of absolutely positioned elements would reduce the complexity and remove both problems outlined above.
Source: atlassian/react-beautiful-dnd