[Autocomplete] - Listbox Jumps to the first option when more items are loaded
See original GitHub issueI have a component called QueryField, that makes a query to a GraphQL API with Apollo and shows the results as selectable options in the Listbox of Autocomplete component.
<Autocomplete
...
ListboxComponent={ListboxComponent}
loading={loading}
options={starships}
renderInput={params => (
<TextField
{...params}
...
label="Starships"
/>
)}
renderOption={option => option.string}
/>
The Listbox is a FixedSizeList of react-window library. To generate more options when user scroll down, I use the components InfiniteLoader of react-window-infinite-loader. I have an issue when the fetchMore
function executes (of useQuery
hook). In this case, the list jumps to the first option, and we have to scroll down again to see the new options loaded.
const ListboxComponent = forwardRef((props, refListbox) => {
const { children, ...other } = props;
const itemData = Children.toArray(children);
return (
<div ref={refListbox}>
<OuterElementContext.Provider value={other}>
<InfiniteLoader
isItemLoaded={isOptionLoaded}
itemCount={itemsCount}
loadMoreItems={loadMore}
>
{({ onItemsRendered, ref: refList }) => (
<FixedSizeList
ref={refList}
height={200}
itemCount={itemsCount}
itemData={itemData}
itemSize={35}
onItemsRendered={onItemsRendered}
outerElementType={OuterElementType}
width="100%"
>
{renderListItem}
</FixedSizeList>
)}
</InfiniteLoader>
</OuterElementContext.Provider>
</div>
);
});
How can I keep the scroll offset when more items are added?
Thanks in advance!
The complete demo is here:
Issue Analytics
- State:
- Created 4 years ago
- Reactions:1
- Comments:6 (2 by maintainers)
Top Results From Across the Web
Listbox Jumps to the first option when more items are loaded ...
I have a component called QueryField, that makes a query to a GraphQL API with Apollo and shows the results as selectable options...
Read more >Jquery jump from autocomplete onselected item to next input ...
i need that when i select the item in autocomplete i jump(focus) to the next input that is in the next div (divprecio),...
Read more >Autocomplete API - Material UI - MUI
Name Type Default
options * array
renderInput * func
autoComplete bool false
Read more >Vue AutoComplete Component - PrimeFaces
Highlights automatically the first item of the dropdown to be selected. *Deprecated since v3.16.0. multiple, boolean, false, Specifies if multiple values can be ......
Read more >Combobox - Shopify Polaris
Combobox is an accessible autocomplete input that enables merchants to filter a list of options and select one or more values. Default With...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
@sibelius no yet. Nobody provides me a correct solution 😦
@jlramosr have you find a fix for this issue?