Error Rendering Inputs in Separate Window using Portals

[kgorgi]

Do you want to request a feature or report a bug?

Bug

What is the current behavior?
I am using React's Portals to render react elements in a completely separate (popup) window. When I attempt to render an <input /> in the popout window, the following error occurs and React fails to render (the window turns white):

'enumerable' attribute on the property descriptor cannot be set to 'true' on this object in react-dom.development.js

What is the expected behavior?
The <input /> renders correctly in the popout window.

Steps to reproduce:
I have created a repo you can clone to recreate the issue as I cannot use a service like JSFiddle because of a no access-control-allow-origin error. The main browser window and popout window are on separate domains (popout is machine local) if I use JSFiddle. The repo is just modified clone of create-a-react-app.

The steps to reproduce are included in repo's README.md. The files of interest in the repo are App.js and PopoutPortal.js.

Repo: kgorgi/react-popout-bug

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?

• This bug only occurs in Edge and IE 11. The popout window renders correctly in Chrome and Firefox.
• I have only tested this bug on React 16.2.0
• OS: Windows 10

[gaearon]

Tagging as needing investigation.

[M-ZubairAhmed]

Hey Dan, can I help in investigation?

[gaearon]

Sure :-) Try to reproduce and see what and where causes it.

[M-ZubairAhmed]

@gaearon I have reproduced that and tried to solve it to, can you check the pr to see if the implementation is what you are expecting

[gaearon]

Can you prepare a React-less reproduction of this so we can file a bug against Edge? Or has this been solved in the latest Edge?

[gaearon]

Fixed in #11870 but I'll keep it open. The next action item is to prepare a minimal reproduction that doesn't involve React.

[M-ZubairAhmed]

@gaearon sure i will do that.