React-sortable-hoc: If VirtualScroll is wrapped inside AutoSize dragging an item doesn't trigger scroll

[ahmedelgabri]

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}
          />
    );
  }
}

[clauderic]

Sounds like you've solved this :)

[burtyish]

Hi @ahmedelgabri, it may be the late hour but I can't seem to grok your solution.
There's the Autosizer'd SortableList and then there's the VirtualScroll.
How is the end result composed?
I know this ticket is pretty stale, but would you (or anyone else for that matter) mind expanding on your answer?

Thanks!

[ahmedelgabri]

Simply the hierarchy for the solution looks like this and width is getting passed from top to bottom, I hope it makes sense.

|__SortableList         
     |__ VirtualList

[burtyish]

Ah, thanks @ahmedelgabri, I really appreciate your quick answer. I was missing that you apparently also had:

const SortableList = SortableContainer(VirtualList, {withRef: true});

Unfortunately, after following the pattern you described, I still have two big problems:

1. this.refs.SortableList is undefined (I need that in my onSortEnd function)

1. I still can't get autoscroll to work 🤔

Update: I fixed the first problem by adding a ref to Autosizer: <AutoSizer ref="AutoSizer"> and then accessing this.refs.AutoSizer.refs.SortableList

[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.