Request: Expose some method for infinite scroll/pagination/scroll bottom

I’ve been trying to implement infinite scroll with ember-power-select, and none of the available public API’s allow a clean implementation. The closest I got was using the onopen hook, but since the list is not rendered when onopen fires the implementation looks like this (CoffeeScript… don’t judge…):

onopen: (options, e) ->
  Ember.run.later =>
    element = $(e.target).parents('.ember-basic-dropdown').find('ul')[0]
    element?.addEventListener 'scroll', =>
      if element.scrollHeight - element.scrollTop is element.clientHeight
        @loadMore()
  , 500

There’s two issues with this approach:

• The event target is sometimes the selected item span, sometimes a div (which isn’t a deal breaker)
• The 500 ms delay is arbitrary, and subject to race conditions. Scheduling it afterRender or run.next didn’t work (which is a deal breaker)

The way I see it, there’s three potential solutions:

• Moving onopen to fire after the list renders
• Exposing an afteropen event
• Exposing a scrollbottom event

Implementing a scrollbottom isn’t too difficult. I got it mostly working by simply dropping this in didInsertElement at addon/components/power-select/options.js:

    this.element.addEventListener('scroll', (e) => {
      if(this.element.scrollHeight - this.element.scrollTop == this.element.clientHeight){
        this.send('scrollBottom');
      }
    });

I might be able to throw some time at this if the maintainer(s?) would like to give some direction.

[luketheobscure]

We worked around it by using the afterOptionsComponent hook. We’ve got a component that renders a “Load more…” button that loads in the next page of records. It’s working really well for us.

[PrzemoRevolve]

In case anyone is interested - we’re managed to achieve pagination by extending power-select/options in a custom component:

//scroll-aware-options.ts
import Options from 'ember-power-select/components/power-select/options';

export default class ScrollAwareOptions extends Options {
  onScroll = () => {}

  didInsertElement() {
    super.didInsertElement();
    this.element.addEventListener('scroll', this.onScroll, { passive: true });
  }

  willDestroyElement() {
    super.willDestroyElement();
    this.element.removeEventListener('scroll', this.onScroll);
  }

}

and then we’ve used a little trick with optionsComponent attribute of power-select:

// our-select.hbs
{{#power-select
  // ...some attributes
  optionsComponent=(component "scroll-aware-options" onScroll=(action "onScroll"))
}}

This way we didn’t have to fork/copy-paste anything to make it work. Hope it helps somebody 😁