React-window: Odd problem with height and top

[vinnymac]

Summary

I have a closed source project I am working on, and came across an issue today where I use react-window for a giant list of items that gets filtered via an input. When I filter the list I sometimes see problems with the way the list is rendered. Occasionally I will see the wrong height being used for a particular component.

If I force the height to be the height I want it to be (by extending the style) then the top offset will be incorrect, creating overlaps of my items or gaps depending on the case. I find this same exact behavior to be occurring in the project I work on, and just like the demo below it seems to only happen "sometimes". Because this happens in reaction to filtering I would assume that is somehow related.

Now I could be using this in a way that is unintended, or perhaps I am doing something silly and just cannot put my thumb on it exactly. But I figure this is a popular use case and people here might know how to proceed best. If this is an existing issue, or you think I should ask about this elsewhere, just let me know, thanks.

Demo

To replicate the problems I am seeing I decided to try to make a little demo of It. Click here to see the demo app. If you want to see the issues with top you just need to override the style attribute and force the height to ROW_HEIGHT or GROUP_HEADER_HEIGHT.

Steps

1. Visit demo
2. Press the button Remove Bananas
3. See the enlarged heading for 'Apples'

Notes

• Their are other ways to cause issues by clicking the various buttons, but I found that to be the easiest/reliable way of doing it.
• Hiding and Showing the list seems to fix the issue.

Tested Browsers

• Firefox Version 67.0.4 (64-bit)
• Chrome Version 75.0.3770.100 (Official Build) (64-bit)

[bvaughn]

Checkout the docs:
https://react-window.now.sh/#/api/VariableSizeList

resetAfterIndex(index: number, shouldForceUpdate: boolean = true): void
VariableSizeList caches offsets and measurements for each index for performance purposes. This method clears that cached data for all items after (and including) the specified index. It should be called whenever a item's size changes. (Note that this is not a typical occurrance.)

By default the list will automatically re-render after the index is reset. If you would like to delay this re-render until e.g. a state update has completed in the parent component, specify a value offalsefor the second, optional parameter.

Sounds like you aren't calling that method to let it know that one of your cached sizes have changed.

Sounds like a duplicate of #273, #199, #147, #57

[vinnymac]

@bvaughn thanks for the assistance, I appreciate it greatly. Searching the issues for this problem I didn't end up coming across any of these unfortunately.

It might be advantageous (for your sanity) if we updated the docs to make this case more prominent, perhaps as a caveat of some sort? The docs start off with justifying why the method exists, instead of giving a use case for what a person would use it for.

Starting it instead with something like This method should be called whenever the source items change. could help. Anything to avoid spamming you more in the future if I can help it 👍

[bvaughn]

Sure, no problem.

On Wed, Jul 3, 2019, 4:34 PM Vincent Taverna [e-mail]
wrote:

@bvaughn https://github.com/bvaughn thanks for the assistance, I
appreciate it greatly. Searching the issues for this problem I didn't end
up coming across any of these unfortunately.

It might be advantageous (for your sanity) if we updated the docs to make
this case more prominent, perhaps as a caveat of some sort? The docs start
off with justifying why the method exists, instead of giving a use case for
what a person would use it for.

Starting it instead with something like This method should be called
whenever the source items change. could help. Anything to avoid spamming
you more in the future if I can help it 👍

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/bvaughn/react-window/issues/280?email_source=notifications&email_token=AAAHHHKEU5Z2UVRSOMCN5L3P5UEMFA5CNFSM4H5HW4P2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODZFTJYA#issuecomment-508245216,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAAHHHK5ZANLKNLER475T33P5UEMFANCNFSM4H5HW4PQ
.