Scroll item to stay always in the viewport (when list is set to overflow for example)

[monochromer]

How to scroll a height-limited list with options when they get in focus?

[jukben]

Hi, could you please be more specific? Do you want to limit the autocomplete options and make them scrollable? Then you need to provide your own styles. The defaults one don't handle this case.

Something like this: https://codepen.io/jukben/pen/erwRbr?editors=0110?

[monochromer]

I want clicking on the arrow up and down, the list was scrolled until the element got the focus

[jukben]

Got it. This could be easily fixed with https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView. In the case when rta__list has overflow: scroll with it we can ensure that element is still in the view. 👍

Are you interested in sending PR for it?

[monochromer]

Thanks! I don't think I'll have time to learn source code for PR.

[jukben]

OK. I hope I will do it soon, it should be quite straightforward.

[jukben]

This should be ready in the master. You can check it out @monochromer 💪 I will release it with rest of it from 2.3.0

[monochromer]

Thanks for this feature! I think for UX this settings would be better for moving to next item

scrollIntoView({
  behavior: 'smooth',
  block: 'end'
 });

and

scrollIntoView({
  behavior: 'smooth',
  block: 'start'
 });

for moving to previous item

[jukben]

That actually makes a sense! Good point. I will try to cook it up – at least if you are not interested in doing so.

[jukben]

@monochromer feel free to test https://github.com/webscopeio/react-textarea-autocomplete/releases/tag/v2.3.0