react-modal
react-modal copied to clipboard
Failed prop type: Invalid prop `appElement` supplied to `Modal`.
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 toModal
.
See: Codesandbox
What's the best to workaround this?
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?
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?
Perhaps node type
or something...
Do you mean PropTypes.node
? It doesn't feel right, since it can be a number, for example.
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.'
);
}
},
@moroshko I've pushed a branch here fix/appElement-property-detection
...can you check if it fixes the problem, please?
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?
@diasbruno Any chance to publish this fix to npm (even as a beta version)?
@moroshko I fixed the reference for this test...you can use the same branch.
@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.
Yeah...the project will need to have everything that react-modal uses to compile...I'll upload a precompiled version in this branch.
Added the precompiled version. Hope now we can test this. 🤞
The original warning has gone, but now we get:
Warning: Invalid argument supplied to oneOfType. Expected an array of check functions, but received an object at index 0.
@diasbruno Any thoughts how to proceed from here?
Has there been any update on this? I've just started running into the same issue too. Thanks!
any updates?