Failed prop type: Invalid prop `appElement` supplied to `Modal`.

[moroshko]

Currently, appElement is expected to be an instance of window.HTMLElement.

But, when the Modal is rendered inside an iframe, the iframe's window.HTMLElement is a different instance causing the following warning:

Failed prop type: Invalid prop appElement supplied to Modal.

See: Codesandbox

What's the best to workaround this?

[diasbruno]

Hi @moroshko, this is an interest case. Probably there is no workaround, because if we are dealing with 2 DOM/frame instances, I believe every property that expects an elements will fail.

Probably we need another strategy to validate these properties.

Any Idea?

[moroshko]

Is setting and removing attributes the only thing we do with the appElement?
If so, what if we had a PropTypes function that checked whether appElement has a setAttribute (and maybe removeAttribute) methods?

[diasbruno]

Perhaps node type or something...

[moroshko]

Do you mean PropTypes.node? It doesn't feel right, since it can be a number, for example.

[diasbruno]

Something like...facebook/prop-types#proptypescheckproptypes

const IHTMLElement = {
  nodeType: PropTypes.number,
  setAttribute: PropTypes.func,
  removeAttribute: PropTypes.func,
  ....
};

const element: IHTMLElement = element;

const props = {
   appElement: element
};

PropTypes.checkPropTypes(IHTMLElement, element, 'prop', 'MyComponent');

or with custom props...

  customProp: function(props, propName, componentName) {
    if (props[propName].nodeType === x) {
      return new Error(
        'Invalid prop `' + propName + '` supplied to' +
        ' `' + componentName + '`. Validation failed.'
      );
    }
  },

[diasbruno]

@moroshko I've pushed a branch here fix/appElement-property-detection...can you check if it fixes the problem, please?

[moroshko]

How could I try this branch in my app? It doesn't contain the lib folder which main in package.json points to. I get:

Can't resolve 'react-modal'

Could you publish a version to npm?

[moroshko]

@diasbruno Any chance to publish this fix to npm (even as a beta version)?

[diasbruno]

@moroshko I fixed the reference for this test...you can use the same branch.

[moroshko]

@diasbruno I'm afraid it's not easy to test it the way you propose. I'm getting various errors like:

SyntaxError: Unexpected token

and

Support for the experimental syntax 'classProperties' isn't currently enabled

I think we need to compile it. Can we please publish a beta version to npm for testing? This way we are testing the real thing.

[diasbruno]

Yeah...the project will need to have everything that react-modal uses to compile...I'll upload a precompiled version in this branch.

[diasbruno]

Added the precompiled version. Hope now we can test this. 🤞