Edge marker is not dynamically updated about react-flow HOT 9 OPEN

Dynamically instantiated SVG elements don't work: https://issues.chromium.org/issues/40656725
svg may needs an appropriate namespace.

- <svg className="react-flow__marker"> 
+ <svg xmlns="http://www.w3.org/2000/svg" className="react-flow__marker">

There seem to be other svg's in the codebase with no namespace defined.

from react-flow.

I found a workaround. This works fine in Chrome:
https://codesandbox.io/p/sandbox/focused-morse-8wm7s5

Add a custom edge marker, and set it in thedefaultEdgeOptions:

<svg style={{ position: `absolute`, width: 0, height: 0 }}>
  <defs>
    <marker
      id="default-edge-marker"
      viewBox="0 0 0 0"
      markerHeight={0}
      markerWidth={0}
    ></marker>
  </defs>
</svg>
<ReactFlow
  defaultEdgeOptions={{
    markerStart: `default-edge-marker`,
    markerEnd: `default-edge-marker`,
  }}
/>

from react-flow.

Don't mutate objects in your setter function, that's where the issue comes from.
Replace this

if (edge.id === "e1-2") {
  edge.markerStart = markerStart;
}

with this

if (edge.id === "e1-2") {
  return {
    ...edge,
    markerStart,
  };
}

Here's your sandbox corrected.

from react-flow.

Thanks, but that Sandbox still doesn't seem to work correctly.

1. Go to the https://codesandbox.io/p/sandbox/misty-wave-6yl8t3?file=%2FApp.js%3A31%2C9-36%2C10 (should reload the page)
2. Click the "Arrow" checkbox
3. Marker is not rendered

from react-flow.

The sandbox I linked seems to work completely fine. I open the sandbox, click the checkbox and see a red marker appearing without having to click/drag or do anything at all.

Even the one you linked works completely fine 😄

from react-flow.

Is it possible that this is environmentally dependent? I am having problems in my environment described in the ticket.

from react-flow.

Mh... what browser is that? Chrome?

from react-flow.

Interesting, in Chrome it doesn't work but in FF it does 😄
Seems to be a bug somewhere, that's strange

from react-flow.

Interesting find!

from react-flow.