search

jacobworrel / react-windowed-select

An integration of react-window with react-select to efficiently render large lists.
MIT License
142 stars 38 forks source link

#56 workaround #58

Closed gege83 closed 3 years ago

gege83 commented 3 years ago

The solution is to make the filtering inside the windowed select so we can decide how many elements do we need to show. if the number of elements are below the threshold then we can render the elements with the default MenuList.

Some extra is that the types are exported on publish, i hope you don't mind

jacobworrel commented 3 years ago

@gege83 Thanks for the PR! When I try to validate the fix in the "long label text" storybook story, the problem persists. Am I missing something?

Also, typings were recently exported via a separate PR: https://github.com/jacobworrel/react-windowed-select/pull/60

gege83 commented 3 years ago

Hi @jacobworrel,

I have changed the windowThreshold to 2, so my changes takes effect in the storybook.

Can you please check again. Thanks, Gergo

jacobworrel commented 3 years ago

@gege83 After looking this over again, unfortunately this doesn't really solve the problem because there could still be cases where after filtering down the list of options via the search input, the number of options is still greater than the window threshold, which leads to the same degraded user experience.

For example, try passing the following variable as the options to the 'long lable text' story and you'll see what I mean:

const optionsLongLabel = R.pipe( R.map(x => ({ value: x, label:Option ${x}})), R.insert(1, { value: 'long1', label: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum' }), R.insert(2, { value: 'long2', label: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum' }), R.insert(3, { value: 'long3', label: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum' }), )(R.range(0, 15));

I think the real solution is to calculate the menu height using the measured heights of the filtered options.