Odd behavior with `loadMore`

[tmpace]

trafficstars

First, here is the code I'm working with:

import React from 'react'
import InfiniteScroll from 'react-infinite-scroller'

const Step2Table = props => {
  const { urlLists } = props
  const hasMore = (urlLists.num_found === undefined) || (urlLists.num_found > urlLists.data.length)

  const items = urlLists.data.map((list, i) => {
    return (
      <tr key={i}>
        <td>{list.name}</td>
        <td>{list.date_created}</td>
      </tr>
    )
  })

  return (
    <div>
      <div role='tabpanel' className='tab-pane fade in active' id='cac-url-existing'>
        <div className='row'>
          <div className='col-lg-6'>
            <div className='form-group'>
              <label htmlFor='url-list-search' className='sr-only'>Search URL Lists</label>
              <input type='text' className='form-control' id='url-list-search' name='url-list-searc' placeholder='Search URL Lists' />
            </div>
          </div>
        </div>
      </div>

      <div className='row'>
        <div className='col-lg-12'>
          <div className='table-responsive'>
            <table className='table table-striped table-hover fixed-header' id='cac-url-existing-table'>
              <thead>
                <tr>
                  <th className='sortable' id='cac-url-list-name'>URL List Name</th>
                  <th className='sortable down' id='cac-url-list-date'>Create Date</th>
                </tr>
              </thead>
              <InfiniteScroll
                style={{ overflowY: 'auto', clear: 'both' }}
                element='tbody'
                loadMore={props.getUrlLists}
                hasMore={hasMore}
                loader={<tr key={0}><td >Loading...</td></tr>}
                useWindow={false}
              >
                { items }
              </InfiniteScroll>
            </table>
          </div>
        </div>
      </div>
    </div>
  )
}

export default Step2Table

Which results in loadMore being called once on initial load, the data loads, and the loading div stays on the page.

If I move the clear: 'both' to the loader component instead, it will load twice but then not load any longer, and the loading div still remains.

Not really sure what the deal is, but it's very confusing - hopefully I'm doing something simple incorrectly.

[tmpace]

Also, FWIW, I hasMore is true whenever the loading stops, I've checked this already.

[tmpace]

Another note, whenever I increase the threshold value, on initial page load, more calls to loadMore seem to happen. I'm guessing these calls are happening before the DOM has finished rendering, and then are prevented after for some reason.

[danbovey]

I recently updated the issue templates on this repo so that I can identify the bugs with this repo.

Please clone your layout and use of react-infinite-scroller by forking this Code Sandbox and linking it here. Doing so will massively expedite getting the bug fixed! 👊

[currybob]

same issue here

[jimmywarting]

shouldn't the loadMore return a promise or something?

[vc-vishal]

@tmpace Have you found any solution for this issue? , I'm facing same!