Rendering issue with tag iteration/re-ordering #2271

Closed
joshgillies opened this Issue Feb 23, 2017 · 3 comments

Comments

Projects
None yet
2 participants
@joshgillies
Contributor

joshgillies commented Feb 23, 2017

Help us to manage our issues by answering the following:

  1. Describe your issue:

Currently tracking an issue that seems to present itself when you iterate over a nonAnonymous/nonVirtual tag. eg:

<div data-is='my-tag' each={ item in [1,2,3,4] } data-value={ item }></div>

<!-- versus -->

<virtual each={ item in [1,2,3,4] }>
  <div data-is="my-tag" data-value={ item }></div>
</virtual>

In the above the tag with inline iteration seems to incorrectly render under certain situations, where as a tag wrapped by <virtual> behaves as expected.

This issue seems to only present itself when a list is reordered. See below for an example of this.

  1. Can you reproduce the issue?

https://jsfiddle.net/q16yhc4b/

  1. On which browser/OS does the issue appear?

OSX 10.12.3 - Chrome 56.0.2924.87 (64-bit)

  1. Which version of Riot does it affect?

v3.3.1

  1. How would you tag this issue?
  • Bug
@GianlucaGuarini

This comment has been minimized.

Show comment
Hide comment
@GianlucaGuarini

GianlucaGuarini Feb 25, 2017

Member

To notice that also the click events on the second list do not trigger any update

Member

GianlucaGuarini commented Feb 25, 2017

To notice that also the click events on the second list do not trigger any update

@joshgillies

This comment has been minimized.

Show comment
Hide comment
@joshgillies

joshgillies Feb 27, 2017

Contributor

Oh right, I actually forgot I added that click event to the list items in my example, consider it a happy accident! ;)

So during my investigation I believe the issue can be tracked down to the following change:

https://github.com/riot/riot/pull/2259/files#diff-0204a5bfd4606caeeaf90c68f376aa65L142

The suspicion is that the previous behaviour called updateOpts.apply(this, [isLoop, parent, isAnonymous, opts, instAttrs]) with the tag instance (this) as extended with incoming data extend(this, data). So the resolution to this issue may be to compute nextOpts based off the yet-to-be-updated tag instance + incoming data.

I don't yet completely understand how changes to a tags instance is managed between updates, and the relationship between anonymous, looped, and named tags to know how to best perform the above. @GianlucaGuarini any input would be appreciated.

Contributor

joshgillies commented Feb 27, 2017

Oh right, I actually forgot I added that click event to the list items in my example, consider it a happy accident! ;)

So during my investigation I believe the issue can be tracked down to the following change:

https://github.com/riot/riot/pull/2259/files#diff-0204a5bfd4606caeeaf90c68f376aa65L142

The suspicion is that the previous behaviour called updateOpts.apply(this, [isLoop, parent, isAnonymous, opts, instAttrs]) with the tag instance (this) as extended with incoming data extend(this, data). So the resolution to this issue may be to compute nextOpts based off the yet-to-be-updated tag instance + incoming data.

I don't yet completely understand how changes to a tags instance is managed between updates, and the relationship between anonymous, looped, and named tags to know how to best perform the above. @GianlucaGuarini any input would be appreciated.

@GianlucaGuarini

This comment has been minimized.

Show comment
Hide comment
@GianlucaGuarini

GianlucaGuarini Mar 5, 2017

Member

fixed with 2e24d12

Member

GianlucaGuarini commented Mar 5, 2017

fixed with 2e24d12

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