Edge's extension layer is incompatible with React

Fixed Issue #9127566


Richard F.
Sep 29, 2016
This issue is public.
Found in
  • Microsoft Edge
Found in build #
Fixed in build #
Reported by 1 person

Sign in to watch or report this issue.

Steps to reproduce

<form> elements (and maybe others) only provide read-only access to their attributes. This fundamentally conflicts with a core part of React’s functionality, causing our extension to be basically unusable. Reproduction steps for the issue follow:

formEl = document.createElement('form'); // create a <form> to mutate
formEl.foo = {};
formEl.foo.bar = 'baz'; // attempt to mutate the `foo` attribute
console.log(formEl.foo.bar); // will log 'baz' in all browsers including Edge, except in Edge's&nbsp;extension context where it's undefined

This is a problem because React internally creates links from its virtual DOM nodes to their respective actual DOM nodes, in both directions. When rendering a <form /> in React, there is a call to a method called precacheNode (line 47 of the file linked below) which sets an attribute on the DOM node that points to the React object. The problem arises because the statement to set that attribute fails silently, and the link isn’t set up. Specifically, if in the React source code after line 47 you were to log hostInst, you’d find that it references the expected object, but node[internalInstanceKey] is still undefined. This causes React to fail to render, update, etc.



0 attachments

    Comments and activity

    • Sorry, the first word of this issue should read elements (and maybe others) only provide read-only access to their attributes but the html was removed.

    • Damn why isn’t there a way to edit a post? FORM ELEMENTS ARE THE BROKEN ONES

    • Also, “When rendering a in React” should be “When rendering a form in React”

    • Microsoft Edge Team

      Changed Assigned To to “Brad E.”

      Changed Assigned To to “Sermet I.”

      Changed Assigned To from “Sermet I.” to “Brad E.”

      Changed Assigned To to “Sermet I.”

      Changed Assigned To from “Sermet I.” to “Scott L.”

      Changed Status to “Confirmed”

      Changed Assigned To from “Scott L.” to “Scott S.”

    • This has bounced around a bunch. Is it assigned for resolution? Thanks

    • Microsoft Edge Team

      Changed Title from “Edge's extension layer is incompatible with React” to “Edge's extension layer is incompatible with React”

      Changed Status from “Confirmed” to “In progress”

      Changed Status from “In progress” to “In code review”

      Changed Status from “In code review” to “Fixed”

    • Hello,

      Thank you for providing this information about the issue. We are pleased to report this feature is fixed in Edge and will be available in an upcoming insider build.

      Best Wishes,
      The MS Edge Team

    You need to sign in to your Microsoft account to add a comment.

    Sign in