fix ComboBox async loading runtime error (#5689)

Author: sookmax

packages/@react-aria/selection/src/ListKeyboardDelegate.ts

@@ -170,7 +170,7 @@ export class ListKeyboardDelegate<T> implements KeyboardDelegate {
     let key = this.collection.getFirstKey();
     while (key != null) {
       let item = this.collection.getItem(key);
-      if (item.type === 'item' && !this.disabledKeys.has(key)) {
+      if (item?.type === 'item' && !this.disabledKeys.has(key)) {
         return key;
       }
 

packages/react-aria-components/stories/ComboBox.stories.tsx

@@ -14,6 +14,7 @@ import {Button, ComboBox, Input, Label, ListBox, Popover} from 'react-aria-compo
 import {MyListBoxItem} from './utils';
 import React from 'react';
 import styles from '../example/index.css';
+import {useAsyncList} from 'react-stately';
 
 export default {
   title: 'React Aria Components'
@@ -139,3 +140,46 @@ export const ComboBoxRenderPropsListBoxDynamic = () => (
     )}
   </ComboBox>
 );
+
+export const ComboBoxAsyncLoadingExample = () => {
+  let list = useAsyncList<ComboBoxItem>({
+    async load({filterText}) {
+      let json = await new Promise(resolve => {
+        setTimeout(() => {
+          resolve(filterText ? items.filter(item => {
+            let name = item.name.toLowerCase();
+            for (let filterChar of filterText.toLowerCase()) {
+              if (!name.includes(filterChar)) {
+                return false;
+              }
+              name = name.replace(filterChar, '');
+            }
+            return true;
+          }) : items);
+        }, 300);
+      }) as ComboBoxItem[];
+
+      return {
+        items: json
+      };
+    }
+  });
+
+  return (
+    <ComboBox items={list.items} inputValue={list.filterText} onInputChange={list.setFilterText}>
+      <Label style={{display: 'block'}}>Test</Label>
+      <div style={{display: 'flex'}}>
+        <Input />
+        <Button>
+          <span aria-hidden="true" style={{padding: '0 2px'}}>▼</span>
+        </Button>
+      </div>
+      <Popover placement="bottom end">
+        <ListBox<ComboBoxItem>
+          className={styles.menu}>
+          {item => <MyListBoxItem>{item.name}</MyListBoxItem>}
+        </ListBox>
+      </Popover>
+    </ComboBox>
+  );
+};