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

Fail to render input in a separate window on Edge #14342

Open
haojy opened this issue Nov 28, 2018 · 7 comments
Open

Fail to render input in a separate window on Edge #14342

haojy opened this issue Nov 28, 2018 · 7 comments

Comments

@haojy
Copy link

haojy commented Nov 28, 2018

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

What is the current behavior?
On Edge, when to render any components in a separate window, it comes to react-dom error for <input>, and JS error like

SCRIPT5673: Unknown runtime error

**If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem.

window.open dose not work well on JSFiddle or CodeSandbox, so put a page link to reproduce the behavior

https://haojy.github.io/issues/input-error-in-separate-window.html

What is the expected behavior?

<input> component should be rendered as expected without errors

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

React: v16.6.3 and V16.3.0
browser:

  • only on Edge v42
  • works well on IE 11/Chrome 70/Safari 12
@nikparo
Copy link

nikparo commented Nov 5, 2019

We are seeing this issue as well. The issue is still present with Edge 44.18362.387.0 and react / react-dom 16.8.4 and 16.11.0.

This issue seems highly related to #11768, especially since the line that throws the error per my investigation is the first Object.defineProperty targeted by the fix for it: https://github.com/facebook/react/pull/11870/files

Seemingly the bug in Edge has grown more severe and the above fix is no longer enough...

@nikparo
Copy link

nikparo commented Nov 5, 2019

Edit: I was confused by the result of getOwnPropertyDescriptor being different when logged to the console than what it is during the function call.


It seems that Object.getOwnPropertyDescriptor(node.constructor.prototype, ...); fails if
node and Object are part of different windows. (function trackValueOnNode in inputValueTracking.js

The returned value is { 0: "<Object doesn't support property or method 'Symbol.iterator'>"}

On the other hand, if we redefine Object the rest of the code works:

const Object = node.ownerDocument.defaultView.Object;

const descriptor = Object.getOwnPropertyDescriptor(
  node.constructor.prototype,
  valueField,
);

@nikparo
Copy link

nikparo commented Nov 5, 2019

After a bit more testing, it seems that Object.defineProperty is indeed at the core of the issue, as it's enough to use the external window's Object for that one line.

inputValueTracking.js:

node.ownerDocument.defaultView.Object.defineProperty(node, valueField, {
  configurable: true,
  get: function() {
    return get.call(this);
  },
  set: function(value) {
    currentValue = '' + value;
    set.call(this, value);
  },
});

@jimwash
Copy link

jimwash commented Jan 8, 2020

I've run into this issue also, are there plans to release a fix for it?

@PKBadiger
Copy link

PKBadiger commented Jan 9, 2020

Facing above issue in my project. could you please let us know in which release the fix will be available ?

Below are the versions which I am using in my project:
"react": "^16.8.6",
"react-dom": "^16.8.6",

@PhilipJohnBasile
Copy link

Since IE is not supported anymore we should close this.

@nikparo
Copy link

nikparo commented Aug 28, 2022

Whether IE is supported doesn’t seem relevant since this was a (mislabelled?) Edge issue. However, chances are it went away when Edge became chromium based in 2020.

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

6 participants