search

bvaughn / react-virtualized

React components for efficiently rendering large lists and tabular data
http://bvaughn.github.io/react-virtualized/
MIT License
26.14k stars 3.06k forks source link

Large list items are center aligned instead of top aligned during keyboard navigation #1263

Open OmkarRajam opened 5 years ago

OmkarRajam commented 5 years ago

Requesting a minor improvement

This happens in virtualized list, when list item height is larger than list height and scrollToAlignment is set to auto.

When arrow key stepper is being used along with virtualized list, and you click a list item or navigate list by pressing down arrow key, for large list items, we see the center of list items instead of the top. It looks weird. It would look natural if we see the top of the list item instead of center.

(Keeping scrollToAlignment = 'start' does solve this problem but overall behavior of list keyboard navigation is weird since instead of highlight moving up and down, highlighted item is always fixed to the top of the list)

In short , instead of this huge_item_wrong

I want this huge_item_right

You can see a demo of the above problem on this codesandbox https://codesandbox.io/s/github/OmkarRajam/react_virtualized_pr It has been created using this repository https://github.com/OmkarRajam/react_virtualized_pr
Browser Chrome
OS Windows
React 16.6.0
React DOM 16.6.0
react-virtualized 9.21.0

edit: I have added a PR that solves this issue. #1264 Thank you for creating such an awesome library

OmkarRajam commented 5 years ago

I have added a PR that solves this issue. #1264 Thank you for creating such an awesome library