Has anyone gotten renderEmptyState to work with Select and Listbox?

[rostero1]

Has anyone gotten renderEmptyState to work with Select and Listbox?

It never renders the popover and listbox.

<Select {...props} >
  <Button>
    <SelectValue className="" />
  </Button>
  <Popover className="">
    <ListBox className="" renderEmptyState={() => <span>Empty</span>}>
      {children}
    </ListBox>
  </Popover>
</Select>

I've also tried explicitly passing {[]} instead of {children}

[LFDanLu]

This is because we don't allow the Select to be opened if there aren't any items:

react-spectrum/packages/@react-stately/select/src/useSelectState.ts

Lines 53 to 56 in 09a258f

	// Don't open if the collection is empty.
	if (listState.collection.size !== 0) {
	triggerState.open();
	}

. Typically we suggest users render a loading spinner in the Select's button like we do for Picker, but quite frankly I don't recall if we had a strong reason to prevent the dropdown from opening and displaying a loading spinner/empty state placeholder instead.

[snowystinger]

If I recall correctly, it was to prevent a brief flash where the Select went from empty to filled, specifically in async cases where the fetch time was short. As @LFDanLu mentions, we preferred the spinner on the control itself. A case could be made that we're being too opinionated for RAC, however, theoretically you could pass whatever you were trying to pass to renderEmptyState, directly as children to the Popover and only conditionally render it or the ListBox depending if it's empty or not.

Otherwise, if no options exist for the Select and none are being fetched, the control should probably be disabled to avoid confusion.

[elilabes]

I have the same issue with but with ComboxBox. It'd be great if the ComboBox/Select could accept an empty state and render it in the ListBox when there are no items.

[austincrim]

Just hit this same issue using a ComboBox. Would love for some affordance to render an empty state.

Had to switch to a totally controlled component just so I can check if the filtered items are empty so I can conditionally render an empty state. Would love a render prop or something else to handle this scenario.

[binaryartifex]

this is a pain point ive had with combobox for a while now. case in point - all examples imply a full, known list being prefetched before hand which makes it very difficult to use the combobox for things like google addresses or searching for amazon products via some api, etc. an example of an initially empty combobox thats able to adjust its item list from a list of potentially thousands of search results would be a much appreciated.