feat: Combobox touchedInput

[huntabyte]

Closes: #397

This PR introduces a new prop to the Combobox.Root, touchedInput, which you can bind to and receive updates on whether the input has been touched or not. This enables you to do things like this:

<script lang="ts">
	import { Combobox } from "$lib/index.js";
	import { flyAndScale } from "@/utils/index.js";
	import { Check, OrangeSlice, CaretUpDown } from "$icons/index.js";

	const fruits = [
		{ value: "mango", label: "Mango" },
		{ value: "watermelon", label: "Watermelon" },
		{ value: "apple", label: "Apple" },
		{ value: "pineapple", label: "Pineapple" },
		{ value: "orange", label: "Orange" },
	];

	let inputValue = "";
	let touchedInput = false;

	$: filteredFruits =
		inputValue && touchedInput
			? fruits.filter((fruit) => fruit.value.includes(inputValue.toLowerCase()))
			: fruits;
</script>

<Combobox.Root bind:inputValue bind:touchedInput>
	<!-- ... -->
</Combobox.Root>

Which shows the full list if the menu is first opened until the user has typed something into the input, rather than keeping the list filtered to the currently selected item.

[changeset-bot]

🦋 Changeset detected

Latest commit: f83eb96

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
bits-ui	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
bits-ui	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Mar 25, 2024 9:45pm