0

I am trying to use D3 parallel parcoords and Material-table together in one app. Each component works well individual. but when those are render together an issue is occurred inside react-beautiful-dnd. D3 parallel parcoords uses d3-dragging package inside and material-table uses react-beautiful-dnd package.

<div className="App">
      <Chart data={chartData} update={updateGridData} colorSet={colorSet} mouseOverRow={overRow} />
      <EditableGrid data={gridData} update={updateChartData} overRow={updateOverRow} />
</div>

An issue occurred is follow as. issue of react-beautiful-dnd

I think that because react-beautiful-dnd and d3-dragging in each component are effect each other when are rendered this issue is occurred.

Dmytro Myronenko
  • 73
  • 1
  • 11

1 Answers1

0

I solved changing innerRef by ref on react-beautiful-dnd

Change:

<Component innerRef={provided.innerRef} {...provided.droppableProps}>

To:

<Component ref={provided.innerRef} {...provided.droppableProps}>

https://github.com/atlassian/react-beautiful-dnd/blob/master/docs/guides/using-inner-ref.md#using-innerref

Marik Ishtar
  • 2,899
  • 1
  • 13
  • 27
Roider
  • 1