A flag to disable removal of absolutely positioned elements

[alex-klimov]

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:

1. ensure_task_text is rather complex and fragile to maintain.
2. react-beautiful-dnd after 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.