question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[Autocomplete] - Listbox Jumps to the first option when more items are loaded

See original GitHub issue

I 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:

https://codesandbox.io/s/infallible-wu-u6ocb

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Reactions:1
  • Comments:6 (2 by maintainers)

github_iconTop GitHub Comments

2reactions
jlramosrcommented, Apr 29, 2020

@sibelius no yet. Nobody provides me a correct solution 😦

1reaction
cmnstmntmncommented, Apr 15, 2021

@jlramosr have you find a fix for this issue?

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found