Skip to content
New issue

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

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

Already on GitHub? # 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

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

No branches or pull requests

7 participants