Picker with infinite scroll / useAsyncList

[mfilteau]

❔ Question

I've been trying to create a listbox-based component with async loading & infinite content using useAsyncList,

As it was not working as expected, I went to the basic and tried the code sample based on the (see below).

However, once the initial entries have been displayed, scrolling at the end of the picker's list doesn't load more items.

Is it supposed to work?

Thanks!

🔦 Context

💻 Code Sample

import './App.css';
import { Provider, defaultTheme, Picker, Item, useAsyncList, View } from '@adobe/react-spectrum';

function App() {
    let list = useAsyncList({
        async load({signal, cursor}) {
            console.log('loading', cursor);
          // If no cursor is available, then we're loading the first page.
          // Otherwise, the cursor is the next URL to load, as returned from the previous page.
          let res = await fetch(cursor || 'https://pokeapi.co/api/v2/pokemon', {
            signal
          });
          let json = await res.json();
          return {
            items: json.results,
            cursor: json.next
          };
        }
      });
      return (
      <Provider theme={defaultTheme}>
        <View borderWidth="thin" borderColor="dark" padding="size-200">
          <Picker label="Select a pokemon" items={list.items} isLoading={list.isLoading} onLoadMore={list.onLoadMore}>
            {(item) => <Item key={item.name}>{item.name}</Item>}
          </Picker>
        </View>
      </Provider>
    );
}

export default App;

🌍 Your Environment

Software	Version(s)
react-spectrum	3.7.0
Browser	Edge 87.0.664.75
Operating System	Windows 10

🧢 Your Company/Team

[mfilteau]

My fault... should have been "... onLoadMore={list.loadMore}>

Now, the picker triggers loadMore when the selection is near the end.

However, I get an exception: TypeError: Cannot read property 'key' of null
useVirtualizerItem

10754 | let updateSize = Object(react__WEBPACK_IMPORTED_MODULE_2__["useCallback"])(() => {
  10755 |   let size = $e57f55a74c4282479f23b22163a$var$getSize(ref.current);
  10756 |   virtualizer.updateItemSize(layoutInfo.key, size);
> 10757 | }, [virtualizer, layoutInfo.key, ref]);
        |                             ^  10758 | Object(_react_aria_utils__WEBPACK_IMPORTED_MODULE_4__["useLayoutEffect"])(() => {
  10759 |   if (layoutInfo.estimatedSize) {
  10760 |     updateSize();

I tried adding to the useAsyncList:

getKeys: item => item.name

[mfilteau]

The VirtualizerItem for "loader" is created without a layoutInfo

content: null
key: 21
layoutInfo: null
rendered: null
viewType: "loader"

[mfilteau]

It seems to work fine in storybook. I'm puzzled.

[LFDanLu]

@mfilteau I can't seem to reproduce your issue in my codesandbox, do you happen to have one that you can share?

[mfilteau]

Hi Daniel,

Looking at your codesandbox, I figured out the problem!

Some check from <React.StrictMode> is throwing an exception.

If you want to reproduce the issue, just change index.js:

import React from "react";
import ReactDOM from "react-dom";

import App from "./App";

const rootElement = document.getElementById("root");
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>, rootElement);

Thanks!

[LFDanLu]

Gotcha, thanks for catching that. We have a umbrella strict mode issue here, I'll mention this issue there and close this. Feel free to reopen if any other issues occur.