Stimulus IE 11 .contain() method doesn't exists

Szymon-dziewonski commented 4 years ago

Hello my problem is connected with multiple targets connected with controller. Here's example which works on every browser - besides our beloved IE 11 (I'm not looking for previous versions) example it's on my subdomain since I'd like to reproduce as much as possible from my original project so webpack build etc

index.ts

import "@stimulus/polyfills";

import { Application, Controller } from "../node_modules/stimulus";

const application = Application.start();

application.register(
  "api-index-animation",
  class extends Controller {
    static targets = [
      "upperRightDot",
      "upperLeftDot",
      "lowerRightDot",
      "lowerLeftDot",
      "centerRightDot",
      "centerLeftDot",
      "centerDot"
    ];
    private upperRightDotTarget;

    connect() {
      console.log(this.upperRightDotTarget);
    }
  }
);

index.html

<!doctype html>
<html>

<head>
    <title>Getting Started</title>
</head>

<body>

    <svg class="api-index-animation"
        data-action="mouseover-&gt;api-index-animation#restartAnimationForMouseover mouseleave-&gt;api-index-animation#resetMouseoverParameter"
        data-controller="api-index-animation" height="100px" style="margin-bottom: -3.2rem" version="1.1"
        viewBox="0 0 800 700" width="200px" xmlns="http://www.w3.org/2000/svg">
        <circle class="api-index-animation__dot api-index-animation__dot--hidden" cx="400" cy="300" data-start="50"
            data-target="api-index-animation.centerDot" r="55" style="fill: #31e24c"></circle>
        <circle class="api-index-animation__dot api-index-animation__dot--hidden" cx="660" cy="150"
            data-target="api-index-animation.upperRightDot" r="55" style="fill: #3196e2"></circle>
        <circle class="api-index-animation__dot api-index-animation__dot--hidden" cx="800" cy="300"
            data-target="api-index-animation.centerRightDot" r="55" style="fill: #3196e2"></circle>
        <circle class="api-index-animation__dot api-index-animation__dot--hidden" cx="660" cy="450"
            data-target="api-index-animation.lowerRightDot" r="55" style="fill: #3196e2"></circle>
        <circle class="api-index-animation__dot api-index-animation__dot--hidden" cx="140" cy="450"
            data-target="api-index-animation.lowerLeftDot" r="55" style="fill: #3196e2"></circle>
        <circle class="api-index-animation__dot api-index-animation__dot--hidden" cx="0" cy="300"
            data-target="api-index-animation.centerLeftDot" r="55" style="fill: #3196e2"></circle>
        <circle class="api-index-animation__dot api-index-animation__dot--hidden" cx="140" cy="150"
            data-target="api-index-animation.upperLeftDot" r="55" style="fill: #3196e2"></circle>
        <path d="M455 300 L 745 300" data-duration="80" data-start="50" id="cr_line"
            style="stroke: #D4D4D4; stroke-width: 10px; opacity: 0.7; stroke-dasharray: 1000; stroke-dashoffset: 0">
        </path>
        <path d="M345 300 L 55 300" data-duration="80" data-start="50" id="cl_line"
            style="stroke: #D4D4D4; stroke-width: 10px; opacity: 0.7; stroke-dasharray: 1000; stroke-dashoffset: 0">
        </path>
        <path d="M420 250 C 420 250, 420 150, 520 150 M520 150 L 520 150, 610 150" data-duration="70" data-start="50"
            fill="none" id="ur_line"
            style="stroke: #D4D4D4; stroke-width: 10px; opacity: 0.7; stroke-dasharray: 1000; stroke-dashoffset: 0">
        </path>
        <path d="M380 250 C 380 250, 380 150, 280 150 M280 150 L 280 150, 190 150" data-duration="70" data-start="50"
            fill="none" id="ul_line"
            style="stroke: #D4D4D4; stroke-width: 10px; opacity: 0.7; stroke-dasharray: 1000; stroke-dashoffset: 0">
        </path>
        <path d="M380 350 C 380 350, 380 450, 300 450 M300 450 L 300 450, 190 450" data-duration="70" data-start="50"
            fill="none" id="ll_line"
            style="stroke: #D4D4D4; stroke-width: 10px; opacity: 0.7; stroke-dasharray: 1000; stroke-dashoffset: 0">
        </path>
        <path d="M420 350 C 420 350, 420 450, 520 450 M520 450 L 520 450, 610 450" data-duration="70" data-start="50"
            fill="none" id="lr_line"
            style="stroke: #D4D4D4; stroke-width: 10px; opacity: 0.7; stroke-dasharray: 1000; stroke-dashoffset: 0">
        </path>
    </svg>

    <script src="main.js"></script>
</body>

</html>

Error: Object does not support property or method "contains"

70953722_899284557111430_2505627308522471424_n

Testing -> http://stimulus.szymondziewonski.com/project.zip If you are not feeling comfortable to download zip here's files needed to recreate it dist/index.html (already included) src/index.ts (already included) root webpack.config.js tsconfig.json package.json

install packages and run yarn build

Any help would be much appreciated

javan commented 4 years ago

The project.zip link you provided 404s for me. I'm also unable to reproduce the issue using a bare bones Stimulus application: https://glitch.com/~classic-yellowhorn.

Screen Shot 2019-09-16 at 10 47 00 AM

Szymon-dziewonski commented 4 years ago

Thanks for quick reply,

Glitch link is indeed working but my example didn't work. But since you use glitch and I want you to see problem I prepared example for you on glitch.

https://recondite-flare.glitch.me/ This example has additional data-action="" on svg with mouseover and mouseleave events, svg animation is triggered at start and on mouseover restarted

javan commented 4 years ago

Aha! My example didn't have any data-action attributes.

Until the next release is out, you can fix this by adding the code from aa76e25f104ed165a8985f9c93e25c7912ed218f to your application: https://github.com/stimulusjs/stimulus/blob/aa76e25f104ed165a8985f9c93e25c7912ed218f/packages/%40stimulus/polyfills/index.js#L12-L16

Thanks for the report!

Szymon-dziewonski commented 4 years ago

@javan thank you for quick resolving issue, its working :)

hotwired / stimulus

Stimulus IE 11 .contain() method doesn't exists #274