search

cibernox / ember-power-select

The extensible select component built for ember.
http://www.ember-power-select.com
Other
540 stars 377 forks source link

Can the component be made scrollable? #1205

Open DSheffield opened 5 years ago

DSheffield commented 5 years ago

I've tried to made the multi-select component scrollable by giving the ember-power-select-trigger div a max-height and overflow-y: auto to get the scrollbars.

Much weirdness ensues:

  1. clicking on the scrollbar or thumb causes the dropdown to be displayed and the div to be scrolled to the bottom. Why does the trigger get the mouse events from the scrollbar?

  2. scrolling rarely works as expected (either by click in the scroll track or dragging the scroll thumb). The scrollbar frequently jumps to unexpected locations

Adding eventType="click" seems to fix issue 1, but there is still some wackiness with the scrollbar jumping to unexpected locations.

Is the component able to support this arrangement?

cibernox commented 5 years ago

I honestly never tried, but I don't see why it wouldn't be scrollable. But if is true that if you expect to scroll interacting with the scrollbar (as opposed as using the mouse wheel) then you'd have to use eventType=click.

Is there an example you can share?

DSheffield commented 5 years ago

https://ember-twiddle.com/b10c5633b88e90f5dd09c14c53f7ad30

cibernox commented 5 years ago

For what I can see it works pretty well scrolling using the the mouse wheel. It only presents a problem when trying to click, hold and drag the scrollbar when the eventType="mousedown" (the default), which can be changed.

With eventType="click" works pretty well IMO. The only oddity is that when the searchbox gains focus, as usual, the trigger scrolls to show said searchbox if it was out of the viewport, but if you pass searchEnabled=false it behaves well.

I'm not sure if there's much I can improve here. Clicking on the trigger is expected to focus the searchbox if there is any, and scrolling to display what is focused is the default behavior of every browser.

What do you suggest?