virtual-dom icon indicating copy to clipboard operation
virtual-dom copied to clipboard

Html.map with IE11: Unable to get property 'j' of undefined or null reference

Open mbark opened this issue 5 years ago • 3 comments

Using Html.map for a view that conditionally renders text "" or some content with event listeners crashes in IE11 with the error below.

SCRIPT5007: Unable to get property 'j' of undefined or null reference
File: map.html, Line: 3000, Column: 10

This is not one of the problems mentioned in #105 I think, although it might be related to #101.

SSCE

I've created an example project. To reproduce:

  1. Build with elm make src/Main.elm;
  2. Open index.html in IE11;
  3. Click the "Show"-button and then the "Hide 'modal'"-button.

This will trigger the error in the console and the onClick event won't be triggered.

Details

  • It only occurs in IE11, in Firefox and Chrome it works fine.
  • It only happens if the mapped view function has text "" at the first render (i.e. setting mapped = True in the init function in the example won't trigger the error).

Motivation

The reason we run into this problem is that we have want to conditionally render modals and we want to render these as high up in the DOM as possible to avoid stacking context problems. So do do this we have two view functions, one which renders whatever content is on the page and one for the modal which is conditionally rendered.

Workaround

The problem is very easy to work around, just return a div [] [] instead of text "", which is what we have done for now.

mbark avatar Mar 16 '20 08:03 mbark

I tested this locally in IE 11, and can also confirm that it is, indeed, a bug that causes a runtime exception.

Pilatch avatar Apr 13 '20 13:04 Pilatch

It comes down to this code resulting in undefined.

var currentEventNode = ( stopPropagation && event.stopPropagation(), (tag == 2 ? value.b : tag == 3 && value.preventDefault) && event.preventDefault(), eventNode );

Pilatch avatar Apr 13 '20 13:04 Pilatch

@mbark Hi, thank you for your contribution. This bug happens in our product. We found a span [] [] also works well instead of text "" .

atzzCokeK avatar Jul 31 '20 02:07 atzzCokeK