Clobbering of `ref` when using TouchScrollable

I was recently building a modal and using ScrollLock and I inadvertently introduced a bug that cost me 30 minutes or so simply by wrapping a div that had a critical ref in a ScrollLock component. It turns out that TouchScrollable clobbers the ref prop:

https://github.com/jossmac/react-scrolllock/blob/90cbf33d27b9fd0b9911cdf371c4466874ee9a10/src/TouchScrollable.js#L50-L53

There are workarounds for this (like using React.forwardRef), but at the very least this behavior should be documented.

[coreyward]

Right, but why not use applyRef internally to avoid the confusion? In any case, this ought to be documented.

[coreyward]

@wojciech-skowronek I didn’t modify the library to make it work; I just wrapped the children in an extra div like so:

 <ScrollLock>
-  <div ref={someRef}>Example</div>
+  <div><div ref={someRef}>Example</div></div>
 </ScrollLock>

This extra div will give TouchScrollable something to add its ref to without affecting someRef that I care about. This won’t work in all situations, unfortunately (depends on your DOM tree).