Option to change pageSize

[jenovs]

Is your feature request related to a problem? Please describe.
I have a use case with a list of ~250 elements and the pageSize of 100 causes jarring when selecting an item from the end of the list.

Describe the solution you'd like
Ability to set custom pageSize value.

[mrchief]

@jenovs Will it be possible for you to create a codesandbox or a sample repo?

[jenovs]

https://codesandbox.io/s/falling-field-zhvdl
Scroll to the end and try to select something.
With pageSize >= element count (e.g. 250) everything is fine.

There is another bug (not related), but I'm not sure if it's not caused by me: if you search for something, then select the result using arrow keys/enter, that element will stay always focused, i.e. if you scroll that selected element out of the view and select another element, that previous element is scrolled back into view. And then if you try to navigate via keys you'll get an error in console.

[mrchief]

Thanks for the sandbox. I tried scrolling up and down a few times using the mouse wheel and I didn't notice any jarring. Here's a video: https://drive.google.com/file/d/1TjBQEWXDVaYEEpiHUP_qE6kKzJomDcfh/view?usp=sharing

Regarding the other bug, it does sound like a separate issue and could be related to recent changes that enable keyboard navigation. Do you mind opening a separate issue for that, preferably with a reproducible example (CodeSandbox or sample git repo should do)?

[ellinge]

Cannot reproduce the error in console but #259 should fix the scrolling issue (should only be triggered by keyboard nav by changing current focus now)

[jenovs]

Jarring is when you select an element closer to the end of the list: https://drive.google.com/file/d/1-1A56ne0PA3x8Dpz5Cbp-MczZnn88n2p/view

[ellinge]

I've seen it before also. It happens in Firefox and not in Chrome.
In Edge it scrolls all the way to the top in your example. Not sure if that's related though.

[jenovs]

Well, the video is from Chrome. I checked in Firefox and there clicking on an item around the end jumps to the middle and stays there.

I already figured out that setting pageSize to 250 helps

react-dropdown-tree-select/src/tree/index.js

Line 36 in 1f24344

pageSize: 100,

The problem is that it's not accessible as a prop.

[ellinge]

Perhaps fixing it for Firefox (worse result) will solve it for Chrome as well.
Can be the infinite scroll-component used which does it or some rerendering which caused the scroll to change. Changing the pageSize is just a dirty fix, it does not solve the actual issue.

[jenovs]

Agree, but for my use case infinite scroll is really not needed and setting pageSize to >= element count basically disables it 🙂

[mrchief]

There's a reason for not exposing the prop and as @ellinge mentioned, it's a band-aid, not a real solution. The video is not loading for me at the moment (loader keeps spinning forever) so I'll check later.

Infinite scroll (the technique, not critiquing the component) is a necessary evil for ensuring good DOM performance. 100 seemed like a well-balanced number after profiling several page sizes but I always knew, it's not going to be an ideal match for every use case.

On the other hand, rendering it optionally changes the DOM structure which then introduces additional burden on those using custom styles.

Other than exposing pageSize as a prop, I'd love to hear ideas on finding a good solution for this.

[jenovs]

Looks like initializing currentPage to 1 in constructor and removing it from here

react-dropdown-tree-select/src/tree/index.js

Line 72 in a21bd11

this.currentPage = 1

solves the issue for me both in Chrome and Firefox.

I guess because I'm recreating data array on each change with updated values the component rerenders together with infinite scroll component.

Thoughts?

[ellinge]

Confirmed it works

[mrchief]

What works? Initializing currentPage to 1?