Missing items when widening VirtuosoGrid #835

harry0000 · 2023-01-29T04:02:04Z

harry0000
Jan 29, 2023

Hi,

I wanted to use VirtuosoGrid in my application, so I tried it in CodeSandbox.

https://virtuoso.dev/grid-responsive-columns/#responsive-layout

There was one problem: If the style display: grid was set for ListContainer, items were missing when the grid was gradually widened from a narrow width.

screenshot

It seems to me that this is caused by the gridState items not updating when the grid gets wider, is there something wrong with my code? Or perhaps this is a problem that will be solved when the increaseViewportBy option is added to VirtuosoGrid( #807 )?

App.js

const ItemContainer = styled.div`
  width: 100px;
  height: 100px;
  display: flex;
`

const ItemWrapper = styled.div`
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 80%;
  border: 1px solid #000;
  white-space: nowrap;
`

const ListContainer = styled.div`
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fill, 100px);
  grid-template-rows: repeat(auto-fill, 100px);
  justify-content: space-evenly;
  margin: 10px;
`

export default function App() {
  return (
  <>
    <VirtuosoGrid
      style={{ height: 340 }}
      totalCount={10000}
      overscan={200}
      components={{
        Item: ItemContainer,
        List: ListContainer,
        ScrollSeekPlaceholder: ({ height, width, index }) => (
          <ItemContainer>
            <ItemWrapper>{'--'}</ItemWrapper>
          </ItemContainer>
        ),
      }}
      itemContent={index => <ItemWrapper>Item {index}</ItemWrapper>}
      scrollSeekConfiguration={{
        enter: velocity => Math.abs(velocity) > 200,
        exit: velocity => Math.abs(velocity) < 30,
        change: (_, range) => console.log({ range }),
      }}
    />
    <style>{`html, body, #root { margin: 0; padding: 0 }`}</style>
  </>
  )
}