Can't use in react-frame-component

[jdillick]

Bug or feature request?

Bug

Expected behavior

When binding react-beautiful-dnd into an iframe portal, for the functionality to continue to work inside the iframe.

Actual behavior

You will get a number of Invariant errors, such as: "provided.innerRef has not been provided with a HTMLElement."

Steps to reproduce

import React from 'react';
import MyDNDComponent from './MyDNDComponent';
import Frame from 'react-frame-component';

export default (props) => {
  return (<Frame><MyDNDComponent /></Frame>);
}; 

What version of React are you using?

^16.4.1

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

^9.0.1

What browser are you using?

Chrome latest

Demo

Notice that when instanceof is used to check an element in the iframe by the parent window, it will fail. Duck typing these checks will bring back the functionality while retaining some manner of type safety.

document.write('<iframe id="testing-iframe"></iframe>')

const doc = document.getElementById('testing-iframe').contentDocument;
doc.open('text/html', 'replace');
doc.write('<div id="internal-html-element"></div>');
doc.close();
doc.body.children[0] instanceof HTMLElement
// false

doc.body.children[0] instanceof document.getElementById('testing-iframe').contentWindow.HTMLElement
// true

[alexreardon]

Each iframe get's it's own context / objects. And instanceof just checks the prototype chain - which is why this is failing.

Some sort of duck typing could be okay. Although I think it should be hidden behind some helpers and the helpers should have the correct flow types so that the library thinks that it is a HTMLElement

[alexreardon]

Portaling something into an iframe is a fairly interesting use case

[alexreardon]

I would be keen to see the logic in #797 pulled into some helpers to hide this crazy!

[jamesmcintyre]

Just adding that the @jdillick 's branch (https://github.com/jdillick/react-beautiful-dnd/tree/bugfix/duck-type-dom-objects) worked for me (I'm using react-frame-component).

[camdagr8]

@alexreardon maybe accept @jdillick 's fix and then request for the helpers?

[alexreardon]

We will look at getting something like this in soon

[minhtranite]

That issue block me upgrade from version 7 to newer.

[vladkucherov]

I have the same issue

[alexreardon]

I think if we had a small, accurate and shared duck type checker this would be fine to add!

[alexreardon]

I am thinking something like this:

const isHTMLElement = (el: mixed): boolean => {
 return Boolean(el && el.prototype.hasOwnProperty('something'));
}

Just need to find something unique to HTMLElement that is fairly trivial to compute: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement

el.prototype.hasOwnProperty('offsetTop');

[alexreardon]

This should be possible now #1067

[minhtranite]

Hi @alexreardon

I'm trying to update to v12 and it seam that it not work react-frame-component.

I create a sample here: https://codesandbox.io/s/vertical-list-psw70

[Steve1820]

Same here. Cannot use this library in an iframe. Exact same errors as above.

[Steve1820]

Ended up using this fork: react-beautiful-dnd-iframe

[jdillick]

I'd suggest opening a new ticket for this, because the issue is closed it's probably not noticed by anyone, and the root cause of this regression appears to be different from the original problem.