startWatchingForChangeEventIE8 getting called in Google Chrome

[cdonohue]

I'm getting errors in the console when attempting to render select and input components.

Uncaught TypeError: activeElement.attachEvent is not a function

and

Uncaught TypeError: activeElement.detachEvent is not a function

The errors get thrown from https://github.com/facebook/react/blob/master/src/renderers/dom/client/eventPlugins/ChangeEventPlugin.js#L103-L107 and https://github.com/facebook/react/blob/master/src/renderers/dom/client/eventPlugins/ChangeEventPlugin.js#L109-L116

These methods should only run in legacy IE browsers, correct?

I am having this issue in Google Chrome 48.0.2564.82 (Mac).

[zpao]

That's weird… what version of React? What does document.documentMode give you? (should be undefined in Chrome)

[cdonohue]

React version is 0.14.6

document.documentMode is undefined

I thought I had narrowed the problem down to being in a regular Chrome window as opposed to an incognito window, but the problem seems to be intermittent.

Is document.documentMode what determines if those methods run?

[zpao]

Part of it, but it's a hard requirement. It's a property that is only set in IE. Maybe you have an extension or some other piece of code setting it?

[cdonohue]

I'll do some more investigating later this evening. Thanks for the quick responses.

[cdonohue]

Would the doctype have anything to do with it? I am rendering a modal component inside of an iframe using https://github.com/ryanseddon/react-frame-component.

If I inspect the source, the iframe has no doctype, and the content within is where I'm getting all of the errors above.

[zpao]

The doctype might matter but again, only if documentMode is set. I'm 95% sure even doctype-less iframes in Chrome won't have that set. If you could make a simplified test case, that would be helpful.

[cdonohue]

I'll try to get a test case put together for this

[jimfb]

@cdonohue ping

[cdonohue]

I've tried putting together different scenarios. I honestly think that this has something to do with iframes within iframes.

I'll open another issue if I find the root cause. No reason to keep this open with the problem being so intermittent.

Again, sorry for the delay.

[ynwd]

I found this error when use:

import { hydrateRoot } from "https://esm.sh/react-dom@18.2.0/client?dev";

Error:

Uncaught TypeError: activeElement.detachEvent is not a function
    at stopWatchingForValueChange (hello.js:8466:25)
    at handleEventsForInputEventPolyfill (hello.js:8483:13)
    at extractEvents$1 (hello.js:8537:13)
    at extractEvents$5 (hello.js:9147:13)
    at dispatchEventsForPlugins (hello.js:9193:11)
    at hello.js:9318:20
    at batchedUpdates$1 (hello.js:21050:20)
    at batchedUpdates (hello.js:5720:20)
    at dispatchEventForPluginEventSystem (hello.js:9317:11)
    at dispatchEventWithEnableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay (hello.js:7619:13)

But when i use:

import { hydrate } from '"https://esm.sh/react-dom@18.2.0?dev';

Error gone!

What has happened? Did I make a mistake?

---

This is the hydration:

import { hydrateRoot } from "https://esm.sh/react-dom@18.2.0/client?dev";
import React from "https://esm.sh/react@18.2.0?dev";
import Hello from "../pages/hello.tsx";
declare global {
  interface Window {
    // deno-lint-ignore no-explicit-any
    __INITIAL_DATA__: any;
  }
}
const props = window.__INITIAL_DATA__ || {};
delete window.__INITIAL_DATA__;
hydrateRoot(
  document.getElementById("root") as any,
  <Hello {...props} />,
);

This is the component:

import React from "https://esm.sh/react@18.2.0?dev";

const Hello = () => {
  return (
    <form action="/">
      <input type="text" />
      <button type="submit">Go</button>
    </form>
  );
};

export default Hello;