elm / virtual-dom

The foundation of HTML and SVG in Elm.
https://package.elm-lang.org/packages/elm/virtual-dom/latest
BSD 3-Clause "New" or "Revised" License
209 stars 80 forks source link

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

Open mbark opened 4 years ago

mbark commented 4 years ago

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

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.

Pilatch commented 4 years ago

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

Pilatch commented 4 years ago

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 );

atzzCokeK commented 4 years ago

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