Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Error Rendering Inputs in Separate Window using Portals #11768

Closed
kgorgi opened this issue Dec 4, 2017 · 12 comments
Closed

Error Rendering Inputs in Separate Window using Portals #11768

kgorgi opened this issue Dec 4, 2017 · 12 comments

Comments

@kgorgi
Copy link

kgorgi commented Dec 4, 2017

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
Copy link
Collaborator

gaearon commented Dec 6, 2017

Tagging as needing investigation.

@M-ZubairAhmed
Copy link

Hey Dan, can I help in investigation?

@gaearon
Copy link
Collaborator

gaearon commented Dec 6, 2017

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

@M-ZubairAhmed
Copy link

@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
Copy link
Collaborator

gaearon commented Jan 5, 2018

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
Copy link
Collaborator

gaearon commented Jan 5, 2018

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
Copy link

@gaearon sure i will do that.

@gaearon
Copy link
Collaborator

gaearon commented Mar 29, 2018

Note: per #11870 (comment), the problem is not solved.

@suhailnaw
Copy link

I'm looking to make my first contribution and can take a look at this issue!

@diegoborda
Copy link

It seems that this can be closed per #11870 (comment)

@eriklofblad
Copy link

I'm still having this problem with Edge 44.17763.1.0 and react-dom 16.7.0. It works fine in IE11.

@appzing
Copy link

appzing commented Jul 1, 2019

I'm having this problem too with edge version 42.17134.1.0 with React 16.4 and react-dom 16.8.6. Have attached screenshot of where error is occurring
Screenshot (6)

@Gearon

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

7 participants