React-beautiful-dnd: Drag position is offset and very choppy when inside a Semantic UI pushable

[tsdexter]

Bug or feature request?

bug

Expected behavior

position is accurate and dragging is as smooth as normal

Actual behavior

drag position top and left is offset by the width of the pusher when it's opened and when it's closed the top is offset... Looks like it's related to the pusher using transform: translate3d() on the pushable and DND is not taking this into account when calculated the fixed position values.

Steps to reproduce

nest a Droppable with some Draggables inside a semantic UI Push (https://react.semantic-ui.com/modules/sidebar#sidebar-example-left-push), open the pushable, drag a Draggable

Browser version

Google Chrome | 65.0.3325.181 (Official Build) (64-bit)
-- | --
Revision | dc3469be277cc962ba01d9c0cb5bb1a265676c36-refs/branch-heads/3325@{#725}
OS | Mac OS X
JavaScript | V8 6.5.254.41
Flash | 29.0.0.140 /Users/username/Library/Application Support/Google/Chrome/PepperFlash/29.0.0.140/PepperFlashPlayer.plugin
User Agent | Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.181 Safari/537.36

Demo

https://codesandbox.io/s/6w8o2xx6lz

[alexreardon]

Yep, this is caused by us using position: fixed for draggable items. You will need to use a React.Portal. See our using a portal pattern

[alexreardon]

Thanks for the detailed and actionable issue @tsdexter

[tsdexter]

@alexreardon no problem...thanks for the awesome package - appreciate all the hard work going into it!

Two quick questions (#2 is not really related but I don't think it needs its own issue)

1. In the future will you check for any transform values and account for it in calculations to avoid the Portal performance penalty (or is that way to error prone)?
2. Maybe I missed it in the docs, but is there a flag to conditionally style all Droppables during a drag so the user knows where they can/cant drop it rather than just the Droppable they are over? I'm currently doing this with onDragStart and onDragEnd by setting a state prop to the dragging type and checking that in the Droppable

  handleDragStart = result => {
    this.setState({
      dragging: result.type,
    });
  }

  ...

  // isDropDisabled: false
  style={{
    minHeight: dragging === 'CHECK' ? '60px' : 'initial',
    backgroundColor: dragging === 'CHECK' ? '#e0ffe0' : 'initial',
    border: dragging === 'CHECK' ? '4px dashed #66ff66' : 'initial'
  }}

  // isDropDisabled: true
  style={{
    backgroundColor: dragging === 'CHECK' ? '#FFC1C1' : 'initial',
    border: dragging === 'CHECK' ? '4px dashed #FF6666' : 'initial'
  }}

is this the best practice or did I miss something?

[alexreardon]

1. Not at this stage
2. Nope, there is not first class way of doing this. Your approach seems logical

[tsdexter]

Great, thanks again! 👌

[suryarsp]

Regarding #1538 can you describe how to implement this using portal. @tsdexter @alexreardon

[xian]

https://github.com/atlassian/react-beautiful-dnd/blob/master/docs/patterns/using-a-portal.md gives a 404, is it still available somewhere?

[samkahchiin]

As mentioned by @xian, I also cannot find the docs of using-a-portal, is it still available? @alexreardon

[framerate]

There's at least this code I've found: https://github.com/atlassian/react-beautiful-dnd/blob/master/stories/src/portal/portal-app.jsx

[applelok]

Found the solution here (Thanks @renaudtertrais providing a custom hook with the create portal feature)
https://github.com/atlassian/react-beautiful-dnd/issues/128#issuecomment-669083882

Hope can help those people suffering from positioning issue with Semantic UI React.