fix combobox's example to allow a custom empty state

gsoft-inc · Jan 8, 2025 · a4921a5 · a4921a5
1 parent 65cebc2
commit a4921a5
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 3 deletions.
diff --git a/apps/docs/content/components/pickers/ComboBox.mdx b/apps/docs/content/components/pickers/ComboBox.mdx
@@ -101,7 +101,7 @@ A combo box can overridde the default [useFilter](https://react-spectrum.adobe.c
 
 ### Allow Empty Collection
 
-A combo box can be rendered with an empty collection.
+A combo box can be rendered with an empty collection. If you want the popover to open with a custom message, you can use the `renderEmptyState` prop within the `listBoxProps` prop.
 
 <Example src="ComboBox/docs/allowEmptyCollection" />
 

diff --git a/packages/components/src/ComboBox/docs/allowEmptyCollection.tsx b/packages/components/src/ComboBox/docs/allowEmptyCollection.tsx
@@ -5,6 +5,9 @@ export default function Example() {
         <ComboBox
             allowsEmptyCollection
             label="Roles"
+            listBoxProps={{
+                renderEmptyState: () => "No roles found"
+            }}
         >
             {[]}
         </ComboBox>

diff --git a/packages/components/src/ListBox/src/ListBox.tsx b/packages/components/src/ListBox/src/ListBox.tsx
@@ -8,7 +8,7 @@ import { HeaderContext } from "../../Header/index.ts";
 import { useLocalizedString } from "../../i18n/index.ts";
 import { ListBoxSectionContext } from "../../ListBoxSection/index.ts";
 import { Text, type TextSize } from "../../typography/Text/index.ts";
-import { composeClassnameRenderProps, cssModule, isFunction, type SizeAdapter, SlotProvider } from "../../utils/index.ts";
+import { ClearContainerSlots, composeClassnameRenderProps, cssModule, isFunction, type SizeAdapter, SlotProvider } from "../../utils/index.ts";
 
 import { ListBoxContext } from "./ListBoxContext.ts";
 import { ListBoxItem, type ListBoxItemProps, type ListBoxItemSize, type SelectionIndicator } from "./ListBoxItem.tsx";
@@ -140,7 +140,11 @@ function ListBox<T extends object>(props: ListBoxProps<T>, ref: ForwardedRef<HTM
             result = renderEmptyState(renderProps);
 
             if (result) {
-                return <Text className={emptyItemClassNames} size={ListBoxToTextSizeAdapter[size]}>{result}</Text>;
+                return (
+                    <ClearContainerSlots>
+                        <Text className={emptyItemClassNames} size={ListBoxToTextSizeAdapter[size]}>{result}</Text>
+                    </ClearContainerSlots>
+                );
             }
         }