trattles
commented
3 years ago EDIT: Short answer from the docs -> here
Parents with transforms on their position will cause issues. The above doc offers options.
See below cap of my inspector.
React Modal uses a portal and translates the div away from its original position. If you turn off that translation, everything works normally - and actually if you set overflow to 'visible' here you'll see that the item is indeed there, just nudged into the bottom right due to this translation.
To solve this problem - you might be able to render your draggable in a portal. Or you Might be able to solve this with some fancy CSS, or by using a different modal.
larissa-n
Here is a code sample to demonstrate the issue: https://codesandbox.io/s/billowing-pond-xcn2t
When react-beautiful-dnd list is enclosed by a react-modal, the draggable item does not render during drags. In the codesandbox above, notice the List is the same component yet the draggable item renders during drag when placed in the app root but when it's placed in the react-modal, the item is invisible during drag.