shouldAttachToBottom is never 'true', but lowering the threshold fixes it

[donnlee]

The displayBottomUpwards feature is really cool, but I could not get the example app, chat.jsx, to ever enter state shouldAttachToBottom=true, even when the user aggressively scrolls to the bottom. This is the awesome feature that keeps the newest list-item visible at the bottom of <Infinite /> by auto-scrolling to the bottom of the list, but only when the user has scrolled to the bottom of the list.

I found that the current scrollTop was always ~20px less than getLowestPossibleScrollTop(), and thus, shouldAttachToBottom would never be true. The code requires scrollTop >= getLowestPossibleScrollTop().

Aside: I ported the example chat.jsx to ES6 react class, but I doubt that should make a difference.

Here's a capture with my patch in-place to fix this:

You can see the current scrollTop (in blue) is never >= getLowestPossibleScrollTop().

I patched/fixed the issue by lowering the threshold at which shouldAttachToBottom is set to true. 50px seemed to work pretty well:

  handleScroll: function handleScroll(scrollTop) {
    var donnLowestPossible = this.getLowestPossibleScrollTop();
    console.log('displayBottomUpwards: ' + this.computedProps.displayBottomUpwards)
    console.log('lowestPossibleScrollTop: ' + donnLowestPossible)
    this.shouldAttachToBottom = this.computedProps.displayBottomUpwards && scrollTop >= donnLowestPossible - 50;
    console.log('shouldAttach: ' + this.shouldAttachToBottom)

Now, what is the correct way to fix this?

Should there be a settable "margin" (or "buffer") prop that allows us developers to control when shouldAttachToBottom is changed? That is, instead of my hard-coded 50 pixel value?

I'm happy to submit a PR, but I'd like some feedback (and also make sure I'm not alone in encountering this problem).

Thanks Donn