Scrolling does not work on touch devices in virtualized Tree

[saskliutas]

Describe the bug (current behavior)

Scrolling does not work on touch devices (a least on iPad) when virtualization is enabled.

TreeScroll.mov

Disabling virtualization fixes this issue.

Expected Behavior

Scroll should work in both modes: virtualized and non-virtualized.

Link to minimal repro

https://stackblitz.com/edit/github-ua98yj8r-ittcdqhn?file=src%2FApp.tsx

Steps To Reproduce

1. Open sandbox on iPad
2. Try scrolling tree.
3. Tree scrolls only one node at the time.

Some iPads might struggle to run provided stackblitz sandox. In that case clone this repo: https://github.com/saskliutas/itwinui-sandbox/tree/main to run example locally.

Package Version

• I'm using the latest version of iTwinUI.

Anything else?

I can only test this on iPad so not sure if this is reproducible on all touch devices. Might be reproducible with touch screen laptops but I cannot confirm that.

[r100-stack]

Thanks for reporting it. I was able to confirm this issue on an iPad simulator. We've added this issue to our backlog.

[r100-stack]

We have been discussing about this but think we need some more context. Could you please elaborate a bit more on the following:

• What percentage of your users are using touch devices?
• Did any user report this issue? Or this is just something that came out from testing?
• Any other general context related to your app and why you're using the virtualized Tree?

Also, just to mention, virtualization is something that we consider a beta feature. We will document it better. So some performance issues or some rare issues like this one could be there.

We will try to dive deeper once we have more context.

[grigasp]

• Any other general context related to your app and why you're using the virtualized Tree?

The issue was reported by a mobile app team for the Tree components in @itwin/tree-widget-react package. The trees in that package display data loaded from iModels, and we can get thousands of tree nodes, so virtualization is essential.

@ValdasSorys, can you comment on the other questions?

[ValdasSorys]

@r100-stack We use the tree through @itwin/tree-widget-react in our mobile app (so all users use touch devices, Android or iOS, this specific issue I could only reproduce on iOS) to show imodel contents. This was found during testing (released app still uses old version that doesn't have this issue).

[grigasp]

released app still uses old version

To avoid confusion I'll note that the old widget version is using ControlledTree for rendering the hierarchy. The new version that has the issue uses iTwinUI Tree component for that.