Cannot read property 'parent' when number of Trails decreases and then increases

[QuietNoise]

🐛 Bug Report

Edit: See this comment for the v9 errors.

It took some time to nail it to a repeatable state. I saw some reports on this already but those didn't have conclusion yet.
So, when you use Trail render props and your list is dynamically changing you might face the Uncaught TypeError: Cannot read property 'parent' of undefined
on certain occasions.
I narrowed down one reproduce-able scenario to when amount of your list items decreases and then increases.

To Reproduce

1. Insert basic Trail component depending on an array from the state.
2. Change your state list to contain larger amount of items. Trails will re-render with animation. All good.
3. Change your state list to contain smaller amount of items than in step 2. Trails will re-render with animation. All good.
4. Change your state list to contain larger amount of items than in step 3. The error will appear.

Expected behavior

I would expect Trail to work regardless of the number of items in the items list.

Link to repro (highly encouraged)

Example of implementation:
https://codesandbox.io/s/trail-issue-h5dcc
In the example I use Trail to display hints. Number of Trail items (hints) depends on the length of typed input. For 1 char, there are 3 hints, for 2 chars there are 6 hints, for 3 chars there are 2 hints, for 4 chars there is 1 hint, for 5 chars there are 4 hints.
If you type 5 chars the condition for the bug will be satisfied and the error will occur.

Environment

• react-spring v8.0.27
• react v16.8.6

Other context

I tried react spring 9 beta 3.0 but I can't get the Trail working there at all. I've reported the issue in beta discussion thread. (#642 (comment))

[aleclarson]

The sandbox you linked in #642 (comment) was incorrect. You forgot to use animated.div instead of a plain div. Fix that and let me know if the bug you reported here still exists. Thanks! 👍

[QuietNoise]

Hi @aleclarson,
I've updated the sandbox as suggested and unfortunately the issue still persists as described in original post. Please re-open.
Updated sandbox: https://codesandbox.io/s/trail-issue-lo6pb

As a side note:
I've been strictly following official manual for the Trail component (https://www.react-spring.io/docs/props/trail) and in there there is no mention about necessity to use animated wrapper. All examples for Render-props API use plain dom equivalents and not the animated wrappers i.e.

[aleclarson]

The updated sandbox is using v8. Can you try with v9? It looks fixed there, but if you type fast, it looks like there are other issues. Btw, thanks for the useful sandbox, I'll probably add it to react-spring-examples when I get time.

[QuietNoise]

I went to do some more testing in v9 and here is what I've found so far.

First links to playgrounds:
v9: https://codesandbox.io/s/trail-issue-tests-v9-symt5
v8: https://codesandbox.io/s/trail-issue-v8-for-comparison-9wtvj for comparison
In the sandbox there are two tests to help demonstrate the issues. Each with it's own set of hints lists.

• The original issue from v.8 reported here seems to be fixed in v.9.

• ISSUE 1. Typing too fast causes error.
  If you type fast, and items in the hints list will get reduced before animations from previous trail end, it might cause an error:
  Uncaught TypeError: Cannot read property 'props' of undefined
  Both tests in sandbox suffer from this issue.
  If you type very slow and wait a bit after all animations finish then all works good.

• ISSUE 2. V9 always re-animates all list items from scratch.
  This issue is mostly evident in TEST 1. Compare animations in Sandbox for v8 and v9.
  Compared to v8, in v9 entire list gets always re-animated i.e. if you type 2 chars in TEST 1 in v8 then only hint with 4,5 and 6 gets animated. In v9 entire list is animated from scratch. Not sure if it's intentional.

• ISSUE 3. When item list is replaced with new array of the same length the spring animations don't occur at all.
  TEST 2 shows it the most. Here, length of many neighbouring lists is same.
  If you type 2,3 or 4 chars the animations don't occur at all even though some list items are different in each invoked hints list.
  If you type 5 chars, the list is animated because hints list length differs from hints list for 4 chars.
  Compare it to the TEST 2 in v8 sandbox and you can see that in there animations are not missing and it properly animates only the replaced items.

Hope this helps to narrow down source of problems :D

[einsteinreloaded]

@aleclarson is there any workaround, for now, to handle this scenario?

[aleclarson]

• ISSUE 1. Typing too fast causes error.
• ISSUE 2. V9 always re-animates all list items from scratch.

Both seem to be fixed in v9.0.0-rc.2 #985

• ISSUE 3. When item list is replaced with new array of the same length the spring animations don't occur at all.

That's how the Trail component works. You should try the Transition component for more control.