React-beautiful-dnd: Unable to drag when React app rendered inside an iframe

[Tinyik]

Expected behavior

Component continues to work when rendered inside iframe.

Actual behavior

Draggables cannot be dragged when rendered inside iframe using react-frame-component. Work as expected when outside iframe.

Steps to reproduce

class Main extends React.Component {
    render() {
        return (
            <Frame> 
               <FrameContextConsumer>
               {
                   ({document, window}) => {
                      return (<Provider store={store}>
                                <App />
                            </Provider>)
                    }
                }
                </FrameContextConsumer>
            </Frame>
        )
    }
}

And use a dnd component inside App.

Suggested solution?

Does it have anything to do with the React global variable window and document by any chance?

What version of React are you using?

"react": "^16.13.1"

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

"react-beautiful-dnd": "^13.0.0"

What browser are you using?

Latest stable Chrome

Demo

N/A

[Tinyik]

It is supposedly fixed in #1067. Am I doing something wrong here?

[erganmedia]

I have the same problem.

I have created a sandbox just in case someone wants to take a look at it

[Tinyik]

@erganmedia Thanks! The sandbox has a typo, <IFrame> should be <Frame>.

[ethanyu94]

@Tinyik were you able to find a workaround for this? There is a fork called react-beautiful-dnd-iframe that supports iframes, but is still on v9.0. Unfortunately I need some of the newer features so it doesn't work for me.

[Tinyik]

Unfortunately no

On Tue, Aug 25, 2020 at 17:35 Ethan Yu [e-mail] wrote:

>
>

@Tinyik https://github.com/Tinyik were you able to find a workaround
for this? There is a fork called react-beautiful-dnd-iframe that supports
iframes, but is still on v9.0. Unfortunately I need some of the newer
features so it doesn't work for me.

—
You are receiving this because you were mentioned.

Reply to this email directly, view it on GitHub
https://github.com/atlassian/react-beautiful-dnd/issues/1804#issuecomment-680363557,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/ACTWPEUKQ76X3OBIYHLYDWDSCRKELANCNFSM4LZ7CF5Q
.

[geraman21]

Any updates on this issue ?