React-beautiful-dnd: Scrolling draggable items on iOS broken since 11.0.0

[gavrichards]

We have a Trello-style application, with columns which you can scroll horizontally, and each column containing items you can scroll vertically. You can drag items up and down columns and from one column to another.

This has all worked perfectly well until upgrading from 10.1.1 to 11.0.0 or above.

We are now finding that on iOS (either Safari or Chrome) you cannot scroll either horizontally or vertically by dragging your finger on the items in the columns. If you drag/scroll the column header, where no items are located, you can still scroll the columns horizontally, leading me to think it is some functionality of the draggable items that is interfering with the scrolling.

The drag handle of the items in the columns is the entire item, so almost all of each column is a draggable surface. The drag handle of the columns themselves is only a small handle in the top left corner of each column, so there is space to the right of the handle which isn't 'draggable' where you can scroll the columns horizontally.

To be clear - this problem is not about dragging items and auto scrolling their container while dragging - this is about scrolling the container itself without dragging anything.

Did something change in v11 which would affect this behaviour?

[alexreardon]

I just checked and I was able to reproduce this :|

[alexreardon]

I can also confirm this is occurring in 12.x

[alexreardon]

It has to do with our force press opt out.

If you change Draggable > shouldRespectForcePress to true then everything should start working again

[gavrichards]

I'll give that a try @alexreardon. Is this expected behaviour? Or is changing shouldRespectForcePress a temporary solution?

[alexreardon]

it is a temporary solution. i can see that the issue is with that behaviour

[gavrichards]

Thanks. I think we'll stick on 10.1.1 for now until there is a fix.

[alexreardon]

Can you please verify if that change works for you?

[gavrichards]

@alexreardon I've upgraded to 11.0.4 and added showRespectForcePress={true} to my Draggables and scrolling is still not working.

[alexreardon]

I am investigating this now

[alexreardon]

https://bugs.webkit.org/show_bug.cgi?id=199658

[alexreardon]

I have shipped the workaround in an alpha for validation:

12.0.0-alpha.7

Please try it out and let me know how it goes

[moubi]

@alexreardon I can confirm that the work in 12.0.0-alpha.7 does fix the issue for me. I am on iOS 12.3.1

[alexreardon]

Fixed in 11.0.5