New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

SVG elements disappear #1820

Closed
andraaspar opened this Issue Apr 28, 2017 · 9 comments

Comments

Projects
None yet
5 participants
@andraaspar
Copy link
Contributor

andraaspar commented Apr 28, 2017

var data = {
  nextId: 0,
  ids: []
}

var App = {
  view: function (v) {
    return [
      m(`button`, {
        'onclick': () => {
          data.ids.push(data.nextId++)
        }
      },
        `Add item – Click me 4 times`
      ),
      m(`br`),
      m(`svg`,
        data.ids.slice(-2).map(id => (
          m(`g`, {
            'key': id,
          },
            m(`circle`, {
              'cx': 5 + 10 * id,
              'cy': 5,
              'r': 5,
            })
          )
        ))
      )
    ]
  }
}

m.mount(document.body, App)

Fiddle here.

With the above code, you should see two circles appear and then crawl across the screen as you press the button multiple times.

Instead, you get two circles appear and then disappear one after the other. The weird thing is, the DOM inspector shows the two circles as part of the DOM – yet they are invisible.

Reproduced in both Chrome and Firefox.

@tivac

This comment has been minimized.

Copy link
Member

tivac commented Apr 28, 2017

Removing the key on the <g> fixes it for me, https://jsbin.com/zaqovi/1/edit?js,output

Haven't dug in any further though.

@andraaspar

This comment has been minimized.

Copy link
Contributor

andraaspar commented May 2, 2017

@tivac That's a workaround which I cannot use. I use inline SVG much like HTML, with components that are tied to the actual DOM element.

My workaround for now is to create multiple inline SVGs rather than try to model everything inside SVG.

These are both just workarounds. It should work:

Mithril fully supports SVG.

This is a bug.

@andraaspar

This comment has been minimized.

Copy link
Contributor

andraaspar commented May 2, 2017

Maybe Mithril is creating the elements in the wrong document? (HTML document rather than SVG document?)

@isiahmeadows

This comment has been minimized.

Copy link
Collaborator

isiahmeadows commented May 3, 2017

@andraaspar You should be able to check that via inspecting the output. And I wouldn't be surprised if that's the case - it's an easy thing to miss.

@edorrington

This comment has been minimized.

Copy link

edorrington commented May 29, 2017

It seems to have to do with the keys changing as you add items. In the fiddle, in your map over the data, if you set the key to be the index rather than the id (so that the keys remain the same on every iteration) it works fine. So, in other words, if instead of this:
m('svg', data.ids.slice(-2).map(id => ( m('g', { 'key': id, },
you use this:
m('svg', data.ids.slice(-2).map((id,index) => ( m('g', { 'key': index, },
then it works correctly.

@andraaspar

This comment has been minimized.

Copy link
Contributor

andraaspar commented May 30, 2017

@edorrington Reuse works, creating new elements is broken. This needs fixing.

@pygy

This comment has been minimized.

Copy link
Member

pygy commented May 30, 2017

@andraaspar no worries, we're on it

Maybe Mithril is creating the elements in the wrong document? (HTML document rather than SVG document?)

Bingo!

@pygy

This comment has been minimized.

Copy link
Member

pygy commented May 30, 2017

@andraaspar fixed with #1864

@andraaspar

This comment has been minimized.

Copy link
Contributor

andraaspar commented May 30, 2017

@pygy Awesome job! Thank you!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment