bvaughn / react-virtualized-auto-sizer

Standalone version of the AutoSizer component from react-virtualized

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

AutoSizer not rendering initially with consistent height for fixed height components

pzhang24 opened this issue · comments

Hi,

I have a case where AutoSizer only manages the width of the child component. It's similar to the example given in the FAQ:

<AutoSizer disableHeight> {({width}) => <Component height={200} width={width} {...props} />} </AutoSizer>

However, I’ve noticed that AutoSizer skips rendering the child component on its initial render since the width it initially calculates is zero. Since I’m specifying a fixed height for the child component, I would like for it to take up the height I specified even on the initial render.

In my specific case, I am trying to render a virtualized list of items, where the item uses AutoSizer when it is in view, but uses a different component when it is not. When I try to scroll up from the bottom of the list, the list sometimes doesn't scroll properly. This seems to be because the height of items being scrolled into view changes between the initial and subsequent render.

CodeSandbox Link

I was wondering if the AutoSizer implementation could be changed so that the child component should be rendered whenever the client fixes one of the dimensions (ie either disableWidth or disableHeight is true), regardless of whether the other dimension controlled by AutoSizer is zero or not?

(If not, I could work around it by passing a non-zero value for defaultWidth so the initial render isn't skipped. Just wanted to bring this issue up in case this is something that should be fixed.)

I was wondering if the AutoSizer implementation could be changed so that the child component should be rendered whenever the client fixes one of the dimensions (ie either disableWidth or disableHeight is true), regardless of whether the other dimension controlled by AutoSizer is zero or not?

I don't think this would make sense, with the current design of the component. It doesn't make sense to render a 0-width or 0-height anything.

If not, I could work around it by passing a non-zero value for defaultWidth so the initial render isn't skipped. Just wanted to bring this issue up in case this is something that should be fixed.)

Yeah, this would be my recommendation! 👍🏼

Going to close this as it seems to have been resolved.