Links are not clickable when used inside container

[skurfuerst]

Minimal MXGraph Example to reproduce the error **(click to expand)**

<mxGraphModel dx="1242" dy="871" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="827" pageHeight="1169" math="0" shadow="0">
  <root>
    <mxCell id="0" />
    <mxCell id="1" parent="0" />
    <mxCell id="4" value="" style="edgeStyle=none;curved=1;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;fontSize=12;startSize=8;endSize=8;" parent="1" source="2" target="3" edge="1">
      <mxGeometry relative="1" as="geometry" />
    </mxCell>
    <mxCell id="2" value="Anfang" style="ellipse;whiteSpace=wrap;html=1;aspect=fixed;fontSize=16;" parent="1" vertex="1">
      <mxGeometry x="90" y="200" width="80" height="80" as="geometry" />
    </mxCell>
    <mxCell id="6" value="" style="edgeStyle=none;curved=1;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;fontSize=12;startSize=8;endSize=8;" parent="1" source="3" target="5" edge="1">
      <mxGeometry relative="1" as="geometry" />
    </mxCell>
    <mxCell id="8" value="" style="edgeStyle=none;curved=1;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;fontSize=12;startSize=8;endSize=8;" parent="1" source="3" target="7" edge="1">
      <mxGeometry relative="1" as="geometry" />
    </mxCell>
    <mxCell id="3" value="Ent." style="rhombus;whiteSpace=wrap;html=1;fontSize=16;" parent="1" vertex="1">
      <mxGeometry x="290" y="200" width="80" height="80" as="geometry" />
    </mxCell>
    <mxCell id="5" value="&lt;a href=&quot;https://spiegel.de&quot;&gt;Weg 1&lt;/a&gt;" style="whiteSpace=wrap;html=1;fontSize=16;" parent="1" vertex="1">
      <mxGeometry x="470" y="140" width="120" height="60" as="geometry" />
    </mxCell>
    <mxCell id="7" value="&lt;a href=&quot;https://spiegel.de&quot;&gt;Weg 2&lt;/a&gt;" style="whiteSpace=wrap;html=1;fontSize=16;" parent="1" vertex="1">
      <mxGeometry x="470" y="280" width="120" height="60" as="geometry" />
    </mxCell>
    <mxCell id="9" value="Horizontal Container" style="swimlane;horizontal=0;whiteSpace=wrap;html=1;fontSize=16;" parent="1" vertex="1">
      <mxGeometry x="130" y="430" width="640" height="240" as="geometry" />
    </mxCell>
    <mxCell id="11" value="Anfang" style="ellipse;whiteSpace=wrap;html=1;aspect=fixed;fontSize=16;" parent="9" vertex="1">
      <mxGeometry x="34" y="90" width="80" height="80" as="geometry" />
    </mxCell>
    <mxCell id="14" value="Ent." style="rhombus;whiteSpace=wrap;html=1;fontSize=16;" parent="9" vertex="1">
      <mxGeometry x="234" y="90" width="80" height="80" as="geometry" />
    </mxCell>
    <mxCell id="10" value="" style="edgeStyle=none;curved=1;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;fontSize=12;startSize=8;endSize=8;" parent="9" source="11" target="14" edge="1">
      <mxGeometry relative="1" as="geometry" />
    </mxCell>
    <mxCell id="15" value="&lt;a href=&quot;https://spiegel.de&quot;&gt;Weg 1&lt;/a&gt;" style="whiteSpace=wrap;html=1;fontSize=16;" parent="9" vertex="1">
      <mxGeometry x="414" y="30" width="120" height="60" as="geometry" />
    </mxCell>
    <mxCell id="12" value="" style="edgeStyle=none;curved=1;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;fontSize=12;startSize=8;endSize=8;" parent="9" source="14" target="15" edge="1">
      <mxGeometry relative="1" as="geometry" />
    </mxCell>
    <mxCell id="16" value="&lt;a href=&quot;https://spiegel.de&quot;&gt;Weg 2&lt;/a&gt;" style="whiteSpace=wrap;html=1;fontSize=16;" parent="9" vertex="1">
      <mxGeometry x="414" y="170" width="120" height="60" as="geometry" />
    </mxCell>
    <mxCell id="13" value="" style="edgeStyle=none;curved=1;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;fontSize=12;startSize=8;endSize=8;" parent="9" source="14" target="16" edge="1">
      <mxGeometry relative="1" as="geometry" />
    </mxCell>
  </root>
</mxGraphModel>

-> with the example above, you can click onto the links without swimlanes, but not if placed inside Swimlanes.

Analysis

For some reason, the parent does not have "pointerEvents" activated; which leads to the error. This is fixed with the following JS:

Bugfix

The following JS fixes the issue:

function findNonePointerEventElement(element) {
    while (element) {
        if (element.style.pointerEvents === 'none') {
            return element;
        }
        element = element.parentElement;
    }
    return null;
}

[].forEach.call(document.querySelectorAll('svg foreignObject a'), function(el) {
  const nonePointerEventEl = findNonePointerEventElement(el);
  if (nonePointerEventEl) {
    nonePointerEventEl.style.pointerEvents = 'all';
  }
});