[atable] ATableModal does not attach to cell when scrolling

[agritheory]

[agritheory]

The cell with the 7/3/20 date is the one that this is attached to

[agritheory]

@Alchez Talked this over with Curt and the proposed solution is update the modal's position detecting scroll (and page up/down) This should also work for horizontal scroll contexts.

[Alchez]

@agritheory @crabinak

Okay, here's what I've tested so far and the corresponding results:

• VueUse's useWindowScroll composable:
  • I could only get this to match the expected results in very specific circumstances, considering that:
    • I was running the tests within the Histoire context, which might be interfering with the scroll values?
    • useWindowScroll returns absolute scroll values, and not relative (but we could probably consider using some additional logic to find a relative value)
  • Vertical scrolling would lock the modal component, but only if it was spawned from the top of the table (no scrolling has occurred), whereas for cells near the end of the modal would spawn with an offset equal to the distance scrolled.
  • Horizontal scrolling didn't seem to work at all, but I'm not sure if that's because of the Histoire rendering or something wrong in the composable.
• VueUse's useScroll composable/component:
  • I tried applying this to a bunch of targets (window, modal, etc.) but I'm not sure what's a good target for this composable/component, cause none of them worked for me.
• Native scroll event listener:
  • I also tried using the native scroll event listener directly in Vue (@scroll) but that had the same result as useScroll above, which makes sense because useScroll uses the scroll event listener, and makes me think this might be a target issue most likely.

What should the target be? Should we be listening to the whole window? Or a different context?