DragDrop inside Popper Bug

Question

I have this Drag and Drop menu that loads when user clicks the menu icon. Then they select an item and move it to a place to sort their favorite. This menu loads and works totally fine if I put it outside Popper. But inside popper, when user clicks to drag, the current element goes invisible.

This is sample of what I have

      <Popper>
          {({ TransitionProps }) => (
            <DragDropContext onDragEnd={this.onDragEnd}>
              <Droppable droppableId="droppable">
                {(provided, snapshot) => (
                    {icons.map((item, index) => (
                      <Draggable>

These are packages that I use: https://www.npmjs.com/package/react-beautiful-dnd https://www.npmjs.com/package/@material-ui/core

Answer 1

Solution is here by the devs:

https://github.com/atlassian/react-beautiful-dnd/blob/master/stories/src/portal/portal-app.jsx

Solution I applied is setting left and top like below:

const getItemStyle = (isDragging, draggableStyle) => ({
  ...draggableStyle,
  left: "auto !important",
  top: "auto !important",
});

Answer 2

You can clone the item while dragging. see https://github.com/atlassian/react-beautiful-dnd/blob/master/docs/guides/reparenting.md

 <Droppable
      droppableId="droppable"
      renderClone={(provided, snapshot, rubric) => (
        <div
          {...provided.draggableProps}
          {...provided.dragHandleProps}
          ref={provided.innerRef}
        >
          Item id: {items[rubric.source.index].id}
        </div>
      )}
    >