Searchable Select

[ioson]

Hi,
i am trying to add a searchable Select component to my project. This doesn’t seem to be supported by the Select component by default. I tried using the Combobox, but it doesn't behave like a Select would. I have a working solution, but the keyboard navigation is not working. The focus is stuck in the search input and i can't navigate to the content using the arrow down key.

Any ideas how to fix this? Or should i use another approach?

Here is a simplified version of my code (SolidJS):

const { collection, filter } = useListCollection({
	initialItems,
	filter: filterFn,
	groupBy: (item) => item.projectLabel
});

<ArkSelect.Root loopFocus={true} collection={collection()}>

	<ArkSelect.HiddenSelect/>

	<ArkSelect.Control>
		<ArkSelect.Trigger>
			<ArkSelect.ValueText/>
			<ArkSelect.ClearTrigger><X/></ArkSelect.ClearTrigger>
			<ArkSelect.Indicator><ChevronsUpDown/></ArkSelect.Indicator>
		</ArkSelect.Trigger>
	</ArkSelect.Control>

	<ArkSelect.Positioner>
		<ArkSelect.Content>
			<div data-scope="select" data-part="search">
				<input
					type="text"
					onInput={(e) => {
						filter(e.currentTarget.value);
						e.stopPropagation();
					}}
				/>
			</div>

			{collection().items.length === 0 && (
				<div data-scope="select" data-part="no-search-result">No results.</div>
			)}

			<For each={collection().group()}>
				{([projectLabel, items]) => (
					<ArkSelect.ItemGroup>
						<ArkSelect.ItemGroupLabel>{projectLabel}</ArkSelect.ItemGroupLabel>
						<For each={items}>
							{(service) => (
								<ArkSelect.Item item={service}>
									<ArkSelect.ItemText>{service.label}</ArkSelect.ItemText>
									<ArkSelect.ItemIndicator><Check/></ArkSelect.ItemIndicator>
								</ArkSelect.Item>
							)}
						</For>
					</ArkSelect.ItemGroup>
				)}
			</For>
		</ArkSelect.Content>
	</ArkSelect.Positioner>

</ArkSelect.Root>

[segunadebayo]

You could build one with the combobox component. We'll consider adding an example soon.