React-window: FixedSizeList component items doesn't fully render

[yaminyaylo]

Found issue when items in FixedSizeList doesn't render a full list of items. It is reproducible when container options (items) didn't go beyond the container. So when you select last option in a list and there is no scroll in the container then upper options didn't render but with reserved space for them.
Also when you already select some option in the bottom of the list then click on SelectField and go through options by key 'Up' than UNrendered items appear in a list.

Example: https://codesandbox.io/s/4qqlr600lx

Maybe I'm doing something wrong?

Packages version:
"react-window": "^1.2.4",
"react-select": "^2.1.1",

[bvaughn]

It is reproducible when container options (items) didn't go beyond the container.

I don't really know what this means.

For what it's worth, there are console errors in this sandbox that might be related to the unexpected behavior you're seeing:

Warning: Failed prop type: The prop onChange is marked as required in Autocomplete, but its value is undefined.

Warning: NaN is an invalid value for the height css style property.

Can you reproduce this in a project that doesn't use the react-select component? I'm not familiar with the latest release of this component. It's not something I work on or support.

[bvaughn]

Closing due to lack of response.

[yaminyaylo]

Hi,
sorry for so long unresponding and complicated description,

I have fixed console warnings (https://codesandbox.io/s/4qqlr600lx), but still didn't fix the main issue.

First of all, we used FixedSizeList as a selection list for the react-select library. So, in the end, we wanted to have a virtualized autocomplete component.
In my case, I have 6 items (each item has 36px of height) in a FixedSizeList. FixedSizeList has 300px height. The selected value is 6 - last item of the list. When you click on selectField to change the selected value, the selection list (FixedSizeList) appears with the selected last item in a list and first four items are not visible in a list but the height of these items is used. So selection list in this moment has 2 visible items: 5 and selected 6. Then I selected 5th item and do the same ones more, and now selection list has 3 visible items: 4, selected 5 and 6. And so on... You can try to reproduce on codesandbox link above.

The issue is gone when the sum of items height is bigger than FixedSizeList height. So then there is a scroll in selection list then the issue is not reproducible.
I guess this could be a result of react-select own rendering of the selection list as FixedSizeList.

As a temporary fix I calculate sum of FixedSizeList items height and subtract 1px and apply it for FixedSizeList height. Making this untill sum of items is less than FixedSizeList max-height.

[whiteb38]

@yaminyaylo what was your fix for the "Warning: NaN is an invalid value for the height css style property."?

[hisapy]

I'm having the same warning here. EDIT: I was passing a wrong variable ... no problem 😅

[yaminyaylo]

@whiteb38

const optionsCount = options.length ? options.length : 1
const optionsHeight = optionsCount > 8 (visible items count)
          ? 300 (max height)
          : optionsCount * 36 (item height)

return <FixedSizeList
            height={optionsHeight}
            ... />

So, I had that issue when I have more than 8 items.

[gthrm]

I got this problem again in your example https://codesandbox.io/s/4qqlr600lx Warning:NaNis an invalid value for theheightcss style property. ☹️

[waleedshkt]

Had the same issue.

Looks like NaN is an invalid value for the height css style property error only originates if the data being passed to the list is not of type array.

Thus, if there is no item, better to return an empty array to the list

[DinAlla]

Have the same issue. =(

[waleedshkt]

@DinAlla, pass an empty array. data=LIST_VARIABLE || []