React-beautiful-dnd: [rdb+react-window] Passing extra arguments to a row/item causing draggings to throw “Expected phase to be DRAGGING after INITIAL_PUBLISH”

[blueset]

Expected behavior

Drag and drop works per designed.

Actual behavior

Throws Invariant failed: Expected phase to be DRAGGING after INITIAL_PUBLISH when dragging starts.

Steps to reproduce

1. Set up a sample where react-beautiful-dnd works with react-window.
2. Create a reference to the FixedSizeList, and a function that operates on it (e.g. (position) => listRef.current.scrollToItem(position, "start").
3. Add a new argument across Row and Item and finally use the function passed down in an onClick event.
4. Drag a row and get the exception

Suggested solution?

Nil.

What version of React are you using?

16.13.1

What version of react-beautiful-dnd are you running?

13.0.0

What browser are you using?

Chrome 84.0.4147.105 on macOS Catalina 10.15.6 (19G73)

Demo

https://codesandbox.io/s/admiring-kapitsa-4678m?file=/src/App.tsx:1552-1571

[hoangvvo]

@blueset Seems like a duplicate of https://github.com/atlassian/react-beautiful-dnd/issues/1647

I got the exact error when passing extra arguments. The solution is to pass those arguments into itemData.

<FixedSizeList
                  ref={listRef}
                  height={height}
                  width={width}
                  itemSize={60}
                  itemData={{ tracks, jumpTo }}
                  itemCount={tracks.length}
                  outerRef={droppableProvided.innerRef}
                >
                  {Row}
</FixedSizeList>

and pull it form data

function Row(
  props: ListChildComponentProps & { jumpTo: (index: number) => void }
) {
  const { data, index, style } = props;
  const item: Track = data.tracks[index];
  const jumpTo = data.jumpTo

  return (
    <Draggable
      draggableId={`nowPlaying-draggable-${item.id}`}
      index={index}
      key={item.id}
    >
      {(provided) => (
        <CurrentPlaylistItem
          index={index}
          track={item}
          isDragging={false}
          style={style}
          jumpTo={jumpTo}
          provided={provided}
        />
      )}
    </Draggable>
  );
}