diff --git a/packages/propel/src/combobox/combobox.tsx b/packages/propel/src/combobox/combobox.tsx index 5c2fb49dd..427eba3d4 100644 --- a/packages/propel/src/combobox/combobox.tsx +++ b/packages/propel/src/combobox/combobox.tsx @@ -105,7 +105,7 @@ function ComboboxOptions({ className, inputClassName, optionsContainerClassName, - emptyMessage, + emptyMessage = "No results found", positionerClassName, searchQuery: controlledSearchQuery, onSearchQueryChange, @@ -133,6 +133,9 @@ function ComboboxOptions({ return React.Children.toArray(children).filter((child) => { if (!React.isValidElement(child)) return true; + // Only filter ComboboxOption components, leave other elements (like additional content) unfiltered + if (child.type !== ComboboxOption) return true; + // Extract text content from child to search against const getTextContent = (node: React.ReactNode): string => { if (typeof node === "string") return node; @@ -180,9 +183,13 @@ function ComboboxOptions({ className={cn("overflow-auto outline-none", MAX_HEIGHT_CLASSES[maxHeight], optionsContainerClassName)} > {filteredChildren} - {showSearch && React.Children.count(filteredChildren) === 0 && ( -
{emptyMessage || "No results found"}
- )} + {showSearch && + emptyMessage && + React.Children.count( + React.Children.toArray(filteredChildren).filter( + (child) => React.isValidElement(child) && child.type === ComboboxOption + ) + ) === 0 &&
{emptyMessage}
}