Droppable space gets empty

[BloodhoundAllfather]

Bug

I added DragDropContext and Droppable to my website and got my components Draggable. When I drag my component, list suddenly gets empty and the dragging components location is far from mouse pointer.

Expected behavior

I expect to my whole list be still and the dragging component be under mouse cursor.

Actual behavior

List suddenly gets empty on dragging and dragging component is not under mouse cursor.

Steps to reproduce

I just drap a draggable component and get these results

What version of React are you using?

16.7.0

What version of react-beautiful-dnd are you running?

10.0.3

What browser are you using?

Firefox 64.0

Demo

The SelectDetails component has the list that ought to be dragged and dropped. It's inside the render function of the main component.

  <GridItem xs={3}>
    <DragDropContext onDragEnd={this.onDragEnd}>
      <SelectDetails />
    </DragDropContext>
  </GridItem>

This is inside SelectDetails component and basePointsComponentCreator creates the list.

  render() {
    return (
      <Droppable droppableId={"drop1"}>
        {(provided, snapshot) => (
          <Paper className={this.classes.paperStyle}>
            <DroppableWrapper {...provided.droppableProps} ref={provided.innerRef}>
              <GridContainer spacing={16}>{this.basePointsComponentCreator()}</GridContainer>
            </DroppableWrapper>
          </Paper>
        )}
      </Droppable>
    );
  }

My final component that ought to be dragged is entirely inside Draggable tag:
<Draggable draggableId={"abc" + this.props.key} index={this.props.index}>
By the way, the reason I'm concating "abc" to draggableId is that it keeps giving error that draggableId is needed, even though the key i'm giving to it is string.

This is a video of the issue. Sorry for quality, it's Kazam's fault ¯\(ツ)/¯
https://i.imgur.com/goFCy5s.mp4

[treshugart]

Hey, @MChelik, sorry for the delay. We've all been on holiday and Alex (the maintainer) still is (#1010).

It would be really helpful if you could work up a simple codesandbox to isolate your issue. That way we can help debug any potential issues from there.

[mkawczynski07]

@MChelik did you find a solution to this problem? I have exactly the same issue...

[BloodhoundAllfather]

@mkawczynski07 no unfortunately. I gave up. I decided to not use D&D because of this problem. Please tell me if could solve it though.

[mkawczynski07]

My problem is that I use materialui components that create more than one container with overflow. So when I put my Droppable inside those components I have this problem. On the console, I have warning about nested scrolls.

We also decide to use native HTML drag and drop feature until #131 will be implemented.

[cooperfrench95]

Is this maybe to do with the fact that the css property overflow-anchor that is applied to droppables is not currently compatible with Firefox?

[alexreardon]

It sounds like this is linked to #131. So i'll close this as a duplicate and track it there