Prevent column from triggering scroll on touch device

[jk171505]

I implemented react-dnd in one of the columns, but looks like on iOS with touchScrollEnabled react-dnd conflicts with touch scroll.
Is there any way to exclude particular column/cell from triggering touch scroll - kinda touchScrollEnabled=false, but only for a single column/cell?

[wcjordan]

I don't have much advice here, but I think your best bet would be to add listeners in those cells / columns for touch events and stop the propagation of the events. I would expect react-dnd is already doing something like this though, so I'm not sure why it wouldn't be working.

[pradeepnschrodinger]

Maybe we see issues with react-dnd since FDT uses a touchmove handler that's not registered through React. So we won't be able to stop propagate the touch event from a handler specified to the react component.

Instead you'll might need to manually attach a touchmove handler via addEventListener to your cell ref, and then use event.stopPropagation.

Maybe something like this:

class UnscrollableCell extends React.PureComponent {
  constructor(props) {
    super(props);
    this.cellRef = null
  }

  setCellRef = (cellRef) => this.cellRef = cellRef;

  componentDidMount() {
    // stop propagate the 'touchmove' event
    this.cellRef.addEventListener('touchmove', (event) => event.stopPropagation(), { passive: false });
  }
  render() {
    return (
      <div ref={this.setCellRef} >
        hello
      </div>
    );
  }
}

Make sure while testing, you touch scroll on the text "hello", so that you're touching just on the cell, and not on the possibly larger wrapper elements that contain the cell.

[wcjordan]

I'm going to close this due to inactivity. Please let me know if there's more details here which might make us reconsider. Thanks