Server paginated + searchable Select, ListBox "items" prop question

[realwitt]

For a serverside searchable + paginated Select component, does the object to which the current SelectedKey belongs, have to be in the ListBox's "items" prop?

If ListBox's "items" prop doesn't have the object to which the current SelectedKey belongs, it defaults to the placeholder. It seems like I'm forced to include the current object in the "items" prop at all times. (see attached video)

Is it possible to manage the selected state by using only ? I feel like it shouldn't matter if the currently selected ID's object isn't present in "items" if I'm managing the selected state myself in .
This becomes annoying because when no results are present, you still have the single item present, which isn't really what I want.

Here's a video of what I mean:

Screen.Recording.2025-08-30.at.9.50.18.PM.mov

[snowystinger]

Thanks for the discussion, I'm unfortunately having a hard time telling what's going on in that video. Would you be willing to make a codesandbox or stackblitz to demonstrate the behaviour?

I was looking at https://react-spectrum.adobe.com/react-aria/examples/searchable-select.html and if I'm interpreting your question and demo correctly, the selected key's item does not need to be in the ListBox. Granted this isn't an async list. So I think a demo would be very helpful to make sure I'm understanding this correctly.

Thank you!

[realwitt]

Making a stackblitz that shows exactly what I want to demonstrate sounds like a headache but I may do that. I'll attempt to explain what's happening more and show my code here first in the hopes you can spot what I'm doing wrong.

Here's my server pagination component

import { type ReactNode } from "react";
import clsx from "clsx";
import {
  Autocomplete,
  Button,
  Collection,
  Label,
  ListBox,
  ListBoxItem,
  ListBoxLoadMoreItem,
  Popover,
  Select,
  SelectValue,
  type Key,
} from "react-aria-components";

import KInput2 from "~/design-system/K-Input2";

type ServerPaginatedDropdownProps<T extends { id: string | number }> = {
  className?: string;
  selectedItemID?: Key;
  isLoading: boolean;
  items?: T[];
  onLoadMore: () => void;
  placeholder?: ReactNode;
  renderItem: (item: T) => ReactNode;
  renderSelected?: ReactNode;
  searchTerm: string;
  setSelectedItem: (item: T) => void;
  setSearchTerm: (term: string) => void;
  title?: string;
};

export default function ServerPaginatedDropdown<T extends { id: string | number }>({
  className,
  selectedItemID,
  isLoading,
  items = [],
  onLoadMore,
  placeholder,
  renderItem,
  renderSelected,
  searchTerm,
  setSelectedItem,
  setSearchTerm,
  title,
}: ServerPaginatedDropdownProps<T>) {
  return (
    <Select
      selectedKey={selectedItemID}
      onSelectionChange={(selectedItemID) => {
        const selectedItem = items.find((item) => item.id === selectedItemID);
        if (selectedItem !== undefined) {
          setSelectedItem(selectedItem);
        } else {
          throw Error(
            "No object with this ID found (this shouldn't be possible...)"
          );
        }
      }}
    >
      {title !== undefined && (
        <Label className="cursor-default text-neutral-600 dark:text-neutral-50">
          {title}
        </Label>
      )}
      <Button>
        <SelectValue>
          {({ defaultChildren, isPlaceholder }) => {
            return isPlaceholder
              ? placeholder
              : renderSelected
                ? renderSelected
                : defaultChildren;
          }}
        </SelectValue>
        <FontAwesomeIcon icon={faChevronDown} />
      </Button>
      <Popover>
        <Autocomplete inputValue={searchTerm} onInputChange={setSearchTerm}>
          <div>
            <MyCustomRAInput
              value={searchTerm}
              onChange={setSearchTerm}
              size="xs"
              placeholder="Search..."
              aria-label="Search"
              autoFocus
              flatBottom={true}
              backgroundColor="dark:bg-neutral-850 bg-neutral-50"
              backgroundFill="dark:fill-neutral-850 fill-neutral-50"
              className=""
            />
          </div>
          <ListBox items={items}>
            <Collection items={items}>
              {(item) => (
                <ListBoxItem className="text-left" id={item.id}>
                  {renderItem(item)}
                </ListBoxItem>
              )}
            </Collection>
            <ListBoxLoadMoreItem onLoadMore={onLoadMore} isLoading={isLoading}>
              <FontAwesomeIcon icon={faSpinnerThird} />
            </ListBoxLoadMoreItem>
          </ListBox>
        </Autocomplete>
      </Popover>
    </Select>
  );
}

Here's my instantiation of the component

const [legalEntitySearch, setLegalEntitySearch] = useState("");
const allLegalEntitiesInfiniteQuery = useInfiniteLegalEntitiesQuery(
    undefined,
    legalEntitySearch
);
const legalEntityByIdQuery = useLegalEntityByIdQuery(11);
const [currentLegalEntity, setCurrentLegalEntity] = useState<LegalEntity>();

 <ServerPaginatedDropdown
            className={"mt-5"}
            selectedItemID={
              currentLegalEntity !== undefined
                ? currentLegalEntity.id
                : legalEntityByIdQuery.data !== undefined
                  ? legalEntityByIdQuery.data.id
                  : undefined
            }
            setSelectedItem={setCurrentLegalEntity}
            isLoading={allLegalEntitiesInfiniteQuery.isLoading}
            onLoadMore={allLegalEntitiesInfiniteQuery.fetchNextPage}
            searchTerm={legalEntitySearch}
            setSearchTerm={setLegalEntitySearch}
// ~~~~~~~~~~~~~ should be enough, but is not ~~~~~~~~~~~~~ // 
            items={
              allLegalEntitiesInfiniteQuery.data !== undefined
                ? allLegalEntitiesInfiniteQuery.data
                : []
            }
// ~~~~ Instead, I have to do this, to ensure the ID's object is always in the "items" prop ~~~~ // 
             items={
              legalEntityByIdQuery.data !== undefined ||
              currentLegalEntity !== undefined ||
              allLegalEntitiesInfiniteQuery.data !== undefined
                ? Array.from(
                // I do this to dedupe the combined getByID request's payload and infiniteQuery payload (to avoid duplicate key issues)
                    new Map(
                      [
                        // initial item details (not guaranteed to be included in page 1 of paging query) - only if no current item
                        ...(currentLegalEntity === undefined &&
                        legalEntityByIdQuery.data !== undefined
                          ? [legalEntityByIdQuery.data]
                          : []),
                        // selected item stored in state (to remember entire object during filter searches)
                        ...(currentLegalEntity !== undefined
                          ? [currentLegalEntity]
                          : []),
                        // paging query, updates based on filter search
                        ...(allLegalEntitiesInfiniteQuery.data !== undefined
                          ? allLegalEntitiesInfiniteQuery.data
                          : []),
                      ].map((item) => [item.id, item])
                    ).values()
                  )
                : undefined
            }
// ~~~~~~~~~~~~~END ~~~~~~~~~~~~~ // 
            placeholder={
              <div className="flex">
                <div className="flex flex-col">
                  <div className="text-base font-bold text-neutral-50">
                    Mr. Placeholder
                  </div>
                  <div>mrplaceholder@mrplaceholder.com</div>
                  <div>123-456-7890</div>
                </div>
              </div>
            }
            renderItem={(item) => (
              <div>
                <div className="h-16 w-16 rounded-sm bg-blue-400" />
                <div className={clsx("flex flex-col pb-1 text-sm")}>
                  <div className="text-base font-bold">{item.entity_name}</div>
                  <div>steve@reallyreallylongcompanyname.com</div>
                  <div>123-456-7890</div>
                </div>
              </div>
            )}
// ~~~ This should be all that's needed to tell the Select what I want shown as the Selected value ~~~ //
// Instead, this gets ignored when there's no object in "items" that matches the currently selected ID
            renderSelected={
              <div className="flex" >
                <div className={clsx("flex flex-col pb-1 text-sm")}>
                  <div className="text-base font-bold">
                    {currentLegalEntity !== undefined
                      ? currentLegalEntity.entity_name
                      : legalEntityByIdQuery.data?.entity_name}
                  </div>
                  <div>{currentLegalEntity.email ?? currentLegalEntity.email}</div>
                  <div>123-456-7890</div>
                </div>
              </div>
            }
// ~~~~~~~~~~~~~ END ~~~~~~~~~~~~~ // 
          />

What I'm running into is that when the items prop for the ListBox component does not have the entire object of the currently selected ID, the <SelectValue> doesn't render what I provide via my renderSelected prop, but instead defaults back to the placeholder value. I see no reason why SelectValue should ignore my renderSelected prop, since it's not undefined. I tried passing a hardcoded ReactNode to SelectValue via the renderSelected prop to test this, and SelectValue would still not render my ReactNode (presumably because the ID was not present in ListBox's items prop).

I've looked at the <SelectValue> component as shown in the docs but without the ID's object being present in the items array, it falls back to the placeholder value.

Maybe I'm missing a prop or something?

[snowystinger]

Ok I think I understand the question you have now. No I don't think you're missing a prop, but I'm not sure how we could pass the object to SelectValue if it's not in items. We wouldn't know about it. So I think you should account for it in your SelectValue component. Does something like this work for you?

        <SelectValue>
          {({ defaultChildren, isPlaceholder }) => {
            if (isPlaceholder && selectedValue) {
              return // whatever that item would render to, maybe (ignore) => renderSelected(outside of items copy of object)
           }
            return isPlaceholder
              ? placeholder
              : renderSelected
                ? renderSelected
                : defaultChildren;
          }}
        </SelectValue>

[realwitt]

Ahhh that makes a lot of sense, and that fixed my problem. Just render my prop directly and bypass items.
React Aria is awesome. Thanks for what you guys do!