Can I sort a ListState based on selected items (useListState)

[calthejuggler]

Hello there!

I have created a "MultipleSelect" component that is a bit of a cross between a select and a combobox. It works pretty well, but I'm hoping to find a way to sort the items in the list so that, when you select an item, it goes to the top of the list.
I was thinking I would be able to do it by hacking around with the children/items props, but I realise I don't yet know which items are selected because the selectionManager hasn't been created.

I'm trying to make it as similar to (y)our Select component as possible, so it is just as generic. I tried overriding the onSelectionChange function, but the ListState doesn't seem to have the same prepend functionality that I was expecting.

Is there an easy way to do this that I'm missing? Maybe a list state isn't what I should be using. Thanks in advance for any advice!

Here is the component as it is now:

import { FormSize } from "@constants/styles";
import { ChevronDown, SearchIcon } from "lucide-react";
import { ReactNode, useRef, useState } from "react";
import { AriaListBoxProps, useFilter } from "react-aria";
import { useListState } from "react-stately";
import { Button } from "../../Button";
import { Input } from "../../Input";
import { ListBox } from "../../ListBox";
import { Popover } from "../../Popover";

interface MultipleSelectProps<T extends Record<string, unknown>> extends AriaListBoxProps<T> {
	// Label is required
	label: ReactNode;
	size?: FormSize;
	"data-testid"?: string;
}

export const MultipleSelect = <T extends Record<string, unknown>>({
	label,
	size = "md",
	...props
}: MultipleSelectProps<T>) => {
	const { contains } = useFilter({ sensitivity: "base" });
	const [isOpen, setIsOpen] = useState(false);
	const [inputValue, setInputValue] = useState("");

	const state = useListState({
		...props,
		selectionBehavior: "toggle",
		selectionMode: "multiple",
		filter: nodes => {
			const finalNodes = new Set(nodes);
			for (const node of nodes) {
				if (!contains(node.textValue, inputValue)) finalNodes.delete(node);
			}
			return finalNodes;
		}
	});

	const toggleRef = useRef<HTMLButtonElement>(null);
	const popoverRef = useRef(null);
	const inputRef = useRef<HTMLInputElement>(null);
	const listBoxRef = useRef<HTMLUListElement>(null);

	const count = state.selectionManager.selectedKeys.size;

	return (
		<div data-testid={`${props["data-testid"]}-multiple-select`}>
			<Button
				size={size}
				onPress={() => {
					setIsOpen(prev => !prev);
					setInputValue("");
					inputRef.current?.focus();
				}}
				className="text-sm font-normal leading-5"
				color="secondary"
				buttonRef={toggleRef}
				data-testid={`${props["data-testid"]}-multiple-select-button`}
			>
				<div
					className="flex items-center gap-1"
					data-testid={`${props["data-testid"]}-multiple-select-button-label`}
				>
					{label}
					{count != null && count > 0 ? (
						<span
							className="size-5 flex items-center justify-center rounded-full bg-blue-400 text-sm text-white"
							data-testid={`${props["data-testid"]}-multiple-select-button-count`}
						>
							{count}
						</span>
					) : null}
					<ChevronDown size={16} data-testid={`${props["data-testid"]}-multiple-select-button-chevron`} />
				</div>
			</Button>
			{isOpen ? (
				<Popover
					triggerRef={toggleRef}
					popoverRef={popoverRef}
					isNonModal
					state={{
						isOpen,
						setOpen: setIsOpen,
						toggle: () => setIsOpen(prev => !prev),
						open: () => setIsOpen(true),
						close: () => setIsOpen(false)
					}}
					data-testid={`${props["data-testid"]}-multiple-select-popover`}
				>
					<div className="mt-2 rounded-md border border-slate-200 bg-white shadow-md">
						<div className="flex items-center justify-between border-b-[0.5px] border-b-slate-200 bg-white">
							<SearchIcon
								size={20}
								className="ml-2 stroke-slate-400"
								data-testid={`${props["data-testid"]}-multiple-select-popover-search-icon`}
							/>
							<Input
								ref={inputRef}
								className="rounded-none border-none outline-none focus:outline-0"
								placeholder="Search..."
								aria-label={`Search ${label}`}
								onChange={val => setInputValue(val)}
								value={inputValue}
								autoFocus
								onKeyDown={event => {
									switch (event.key) {
										case "Escape":
											setInputValue("");
											setIsOpen(false);
											break;
										case "ArrowDown":
											listBoxRef.current?.focus();
											break;
										case "a":
											if ((event.metaKey || event.ctrlKey) && inputValue.length === 0) {
												state.selectionManager.selectAll();
											}
											break;
										default:
											break;
									}
								}}
								data-testid={`${props["data-testid"]}-multiple-select-popover-search-input`}
							/>
						</div>
						<ListBox
							listBoxRef={listBoxRef}
							className="rounded-t-none py-1 shadow-none ring-0"
							state={state}
							selectionMode="multiple"
							aria-label={`Select ${label}`}
							data-testid={`${props["data-testid"]}-multiple-select-popover-listbox`}
						/>
						<div className="border-t-[0.5px] border-slate-200 p-2">
							<Button
								size="sm"
								color="secondary"
								onPress={() => {
									state.selectionManager.clearSelection();
									setInputValue("");
									setIsOpen(false);
								}}
								data-testid={`${props["data-testid"]}-multiple-select-popover-clear-button`}
							>
								Clear
							</Button>
						</div>
					</div>
				</Popover>
			) : null}
		</div>
	);
};

and here is what it looks like:

Also, if anybody sees any a11y wins that I could make here, I'd love to hear them 🙂

[snowystinger]

Something like this might be useful to you https://reactspectrum.blob.core.windows.net/reactspectrum/3e1c5183f96d1e5b9af14630ab8ddf7dab691962/storybook/index.html?path=/story/react-aria-components--autocomplete-in-popover-dialog-trigger&providerSwitcher-express=false
It's using our new Autocomplete component
https://react-spectrum.adobe.com/react-aria/Autocomplete.html#autocomplete

But specifically the "Recently Visited" example in that story, you could probably do something similar but keep those as selected.
https://github.com/adobe/react-spectrum/blob/main/packages/react-aria-components/stories/Autocomplete.stories.tsx#L397

[calthejuggler]

Thanks @snowystinger 🙂 I'll take a look