If VirtualScroll is wrapped inside AutoSize dragging an item doesn't trigger scroll

Awesome job @clauderic 👍

I’m having a huge list that I’m using react-virtualized but if I want the width to be dynamic, for this I must wrap it with AutoSize You should already know this 😊

class VirtualList extends Component {
  render() {
    const { items } = this.props;

    return (
      <AutoSizer disableHeight>
        {({ width }) => (
          <VirtualScroll
            ref="VirtualScroll"
            estimatedRowSize={70}
            rowHeight={70}
            rowRenderer={({ index }) => {
              const { product } = items[index];
              return <SortableItem index={index} product={product} />;
            }}
            rowCount={items.length}
            width={width}
            height={500}
          />
        )}
      </AutoSizer>
    );
  }
}

So when I do, I lose the ability to scroll while dragging & item, any hints how to fix this?

[ahmedelgabri]

Managed to solve it by wrapping the <Sortablelist> itself with <AutoSizer/> and passing the width to the <VirtualScroll />

<AutoSizer disableHeight>
  {({ width }) => (
    <SortableList ref="SortableList" items={items} width={width} onSortEnd={this.onSortEnd} />
  )}
</AutoSizer>

class VirtualList extends Component {
  render() {
    const { items, width } = this.props;

    return (
          <VirtualScroll
            ref="VirtualScroll"
            estimatedRowSize={70}
            rowHeight={70}
            rowRenderer={({ index }) => {
              const { product } = items[index];
              return <SortableItem index={index} product={product} />;
            }}
            rowCount={items.length}
            width={width}
            height={500}
          />
    );
  }
}

[mitchellwarr]

Thank you for this Issue thread, it fixed my issue. I suggest adding this to the docs somewhere as I only found this fix thanks to Google after reading through the docs and examples.