Scrolling Implementation

[Ahmad-Wali-Sh]

Hi Team,

I have a large content and list to be filtered and searched.

1. Scrolling Through them is impossible via react-search-autocomplete
2. First item on The list should be auto selected for better user experience

Other aspect of React-search-autocomplete is great and thanks in advance,

Wish you attain to this soon.

Regards, Ahmad Wali Sharify

[webstar]

1. You haven't described what's impossible about it, but I assume you mean the list is too long to fit on the screen? You can limit the number of results with e.g. maxResults={10}

And then further, I've made the results a scrollable area, e.g.:

.search-input .wrapper ul {
    max-height: 45vh;
    overflow-y: auto;
    padding-bottom: 0;
 }

One problem with that is that if you're navigating the results with the keyboard up/down arrows, the scrollable area doesn't shift down as you select results outside the viewable area.

I've addressed this with a bit of a hacky solution by triggering:

let selected = document.querySelector('.search-input ul li[data-test="result"].selected');
selected?.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "nearest" });

inside a useLayoutEffect each time the onHover method is invoked.

2. Set the param: autoFocus={true}

[Ahmad-Wali-Sh]

Thanks in Advance.

[shajithomas32]

1. You haven't described what's impossible about it, but I assume you mean the list is too long to fit on the screen? You can limit the number of results with e.g. maxResults={10}

And then further, I've made the results a scrollable area, e.g.:

.search-input .wrapper ul {
    max-height: 45vh;
    overflow-y: auto;
    padding-bottom: 0;
 }

One problem with that is that if you're navigating the results with the keyboard up/down arrows, the scrollable area doesn't shift down as you select results outside the viewable area.

I've addressed this with a bit of a hacky solution by triggering:

let selected = document.querySelector('.search-input ul li[data-test="result"].selected');
selected?.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "nearest" });

inside a useLayoutEffect each time the onHover method is invoked.

2. Set the param: autoFocus={true}

Can you share me the full code to get a vertical scrollbar for the selection drop down when more than 10 items