fix: Ensure that combobox empty state is rendered when items arent directly provided to the combobox (#8720)

* fix: Ensure that combobox empty state is rendered when items arent directly provided to the combobox

* updating docs

Author: LFDanLu

packages/@react-spectrum/s2/src/ComboBox.tsx

@@ -339,14 +339,13 @@ export const ComboBox = /*#__PURE__*/ (forwardRef as forwardRefType)(function Co
     labelPosition = 'top',
     UNSAFE_className = '',
     UNSAFE_style,
-    loadingState,
     ...comboBoxProps
   } = props;
 
   return (
     <AriaComboBox
       {...comboBoxProps}
-      allowsEmptyCollection={loadingState != null}
+      allowsEmptyCollection
       style={UNSAFE_style}
       className={UNSAFE_className + style(field(), getAllowedOverrides())({
         isInForm: !!formContext,

packages/@react-spectrum/s2/test/Combobox.test.tsx

@@ -64,7 +64,10 @@ describe('Combobox', () => {
     comboboxTester.setInteractionType('mouse');
     await comboboxTester.open();
 
-    expect(comboboxTester.options()).toHaveLength(1);
+    let options = comboboxTester.options();
+    expect(options).toHaveLength(1);
+    expect(comboboxTester.listbox).toBeTruthy();
+    expect(options[0]).toHaveTextContent('No results');
     expect(within(comboboxTester.listbox!).getByTestId('loadMoreSentinel')).toBeInTheDocument();
   });
 

packages/@react-stately/list/src/ListCollection.ts

@@ -22,11 +22,15 @@ export class ListCollection<T> implements Collection<Node<T>> {
     this.iterable = nodes;
 
     let visit = (node: Node<T>) => {
-      this.keyMap.set(node.key, node);
-
-      if (node.childNodes && node.type === 'section') {
-        for (let child of node.childNodes) {
-          visit(child);
+      // Skip the loader node so it isn't added to the keymap and thus
+      // doesn't influence the size count. This should only matter for RAC and S2
+      if (node.type !== 'loader') {
+        this.keyMap.set(node.key, node);
+
+        if (node.childNodes && node.type === 'section') {
+          for (let child of node.childNodes) {
+            visit(child);
+          }
         }
       }
     };

packages/react-aria-components/docs/ComboBox.mdx

@@ -335,7 +335,7 @@ interface MyComboBoxProps<T extends object> extends Omit<ComboBoxProps<T>, 'chil
 
 function MyComboBox<T extends object>({label, description, errorMessage, children, ...props}: MyComboBoxProps<T>) {
   return (
-    <ComboBox {...props}>
+    <ComboBox allowsEmptyCollection {...props}>
       <Label>{label}</Label>
       <div className="my-combobox-container">
         <Input />
@@ -344,7 +344,7 @@ function MyComboBox<T extends object>({label, description, errorMessage, childre
       {description && <Text slot="description">{description}</Text>}
       <FieldError>{errorMessage}</FieldError>
       <Popover>
-        <ListBox>
+        <ListBox renderEmptyState={() => <div className="my-item">No results found</div>}>
           {children}
         </ListBox>
       </Popover>

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

@@ -28,7 +28,7 @@ export type ComboBoxStory = StoryFn<typeof ComboBox>;
 export type ComboBoxStoryObj = StoryObj<typeof ComboBox>;
 
 export const ComboBoxExample: ComboBoxStory = () => (
-  <ComboBox name="combo-box-example" data-testid="combo-box-example">
+  <ComboBox name="combo-box-example" data-testid="combo-box-example" allowsEmptyCollection>
     <Label style={{display: 'block'}}>Test</Label>
     <div style={{display: 'flex'}}>
       <Input />
@@ -38,12 +38,14 @@ export const ComboBoxExample: ComboBoxStory = () => (
     </div>
     <Popover placement="bottom end">
       <ListBox
+        renderEmptyState={renderEmptyState}
         data-testid="combo-box-list-box"
         className={styles.menu}>
         <MyListBoxItem>Foo</MyListBoxItem>
         <MyListBoxItem>Bar</MyListBoxItem>
         <MyListBoxItem>Baz</MyListBoxItem>
         <MyListBoxItem href="http://google.com">Google</MyListBoxItem>
+        <MyListBoxLoaderIndicator />
       </ListBox>
     </Popover>
   </ComboBox>

packages/react-aria-components/test/ComboBox.test.js

@@ -11,12 +11,18 @@
  */
 
 import {act} from '@testing-library/react';
-import {Button, ComboBox, ComboBoxContext, FieldError, Header, Input, Label, ListBox, ListBoxItem, ListBoxSection, ListLayout, Popover, Text, Virtualizer} from '../';
+import {Button, ComboBox, ComboBoxContext, FieldError, Header, Input, Label, ListBox, ListBoxItem, ListBoxLoadMoreItem, ListBoxSection, ListLayout, Popover, Text, Virtualizer} from '../';
 import {fireEvent, pointerMap, render, within} from '@react-spectrum/test-utils-internal';
 import React from 'react';
 import {User} from '@react-aria/test-utils';
 import userEvent from '@testing-library/user-event';
 
+let renderEmptyState = () => {
+  return  (
+    <div>No results</div>
+  );
+};
+
 let TestComboBox = (props) => (
   <ComboBox name="test-combobox" defaultInputValue="C" data-foo="bar" {...props}>
     <Label>Favorite Animal</Label>
@@ -25,10 +31,13 @@ let TestComboBox = (props) => (
     <Text slot="description">Description</Text>
     <Text slot="errorMessage">Error</Text>
     <Popover>
-      <ListBox>
+      <ListBox renderEmptyState={renderEmptyState}>
         <ListBoxItem id="1">Cat</ListBoxItem>
         <ListBoxItem id="2">Dog</ListBoxItem>
         <ListBoxItem id="3">Kangaroo</ListBoxItem>
+        <ListBoxLoadMoreItem>
+          loading
+        </ListBoxLoadMoreItem>
       </ListBox>
     </Popover>
   </ComboBox>
@@ -384,4 +393,19 @@ describe('ComboBox', () => {
     let input = getByRole('combobox');
     expect(input).toHaveAttribute('form', 'test');
   });
+
+  it('should render empty state even when there is a loader provided and allowsEmptyCollection is true', async () => {
+    let tree = render(<TestComboBox allowsEmptyCollection />);
+
+    let comboboxTester = testUtilUser.createTester('ComboBox', {root: tree.container});
+    act(() => {
+      comboboxTester.combobox.focus();
+    });
+    await user.keyboard('p');
+
+    let options = comboboxTester.options();
+    expect(options).toHaveLength(1);
+    expect(comboboxTester.listbox).toBeTruthy();
+    expect(options[0]).toHaveTextContent('No results');
+  });
 });