How to reset second Select when choosing item from first Select?

[MattHeslington]

Hello,
I have page where I'm displaying two Select components. with the second one's options being dependent on the choice made in the first Select component. The first Select maps through the values in the array below for example. Movies and Music. If the user selects Movies, the second Select then displays Horror, Commedy etc. This is working fine.

const options = [
    { value: 'Movies', sub: [{ label: 'horror' }, { label: 'comedy' }, { label: 'action' }] },
    { value: 'Music', sub: [{ label: 'rock' }, { label: 'techno' }, { label: 'pop' }] }
]

The problem arises if a user selects let's say Movies, then the sub-category Comedy, and then goes back and chooses Music. The variables for each will read:

Category: Music
SubCategory: Comedy

Which is out of sync with what they should be able to choose or select. Is there a way to reset the second Select 'onSelectedChange' of the first select, so that the user is forced to choose a new sub-category whenever a Category is selected?

Many thanks for any help - it's been driving me crazy!
Cheers,
Matt

[shyakadavis]

Hi, @MattHeslington

Mind sharing your working snippet?

Meanwhile, my guess is turning options into a reactive variable i.e. $: options, but I'm unsure how to trigger a re-render from within. Might not work as is.

Regardless, I'm curious about this too, and sharing your snippet might offer some context. 🙂

[MattHeslington]

Hi, @shyakadavis

Certainly, there's not much to it, though I am already using a recactive variable. When a user chooses an option in the first Select component, we call the getSubCategories function which returns the subCategories for the chosen option and set the subCategory to an empty string. This does display the new options in the second select when the user clicks on it.

let category = ''
let subCategory = ''

const cats = [
    { value: 'Movies', sub: [{ label: 'horror' }, { label: 'comedy' }, { label: 'action' }] },
    { value: 'Music', sub: [{ label: 'rock' }, { label: 'techno' }, { label: 'pop' }] }
]

function getSubCategories(category) {
	const selectedCat = cats.find((cat) => cat.value === category)
	return selectedCat ? selectedCat.sub : []
}

$: subCategories = getSubCategories(category)

<Select.Root
	onSelectedChange={(v) => {
		if (v) {
			getSubCategories(v.value)
			category = v.value
                       subCategory = ''
		}
       }}>
	<Select.Trigger>
		<Select.Value placeholder="Category" />
	</Select.Trigger>
	<Select.Content>
		{#each cats as cat}
			<Select.Item value={cat.value}>{cat.value}</Select.Item>
		{/each}
	</Select.Content>
</Select.Root>

// Second Select

<Select.Root
	onSelectedChange={(v) => {
		subCategory = v.label
	}}>
	<Select.Trigger>
		<Select.Value placeholder="Sub Category" />
	</Select.Trigger>
	<Select.Content>
		{#each subCategories as subCat}
			<Select.Item value={subCat.label}>{subCat.label}</Select.Item>
		{/each}
	</Select.Content>
</Select.Root>

After posting this yesterday I realised it's not an issue to do with this (great) library, it's a UX / Javascript issue. We are setting the subCategory to an empty string for the second select when a choice is made on the first select, so with form handling we can prevent submission, but the OCD in me just wants to be able to reset the second select each time, so that the placeholder is displayed, instead of showing the last chosen option.

EDIT: I did notice in the bits.ui documentation there's an 'el' property on the <Select.Content> tag described as "The underlying DOM element being rendered. You can bind to this to programatically interact with the element", though I haven't worked out how to do this yet

[shyakadavis]

Hey, @MattHeslington

Got it working with a weird hack 😅

I created a reactive object variable:

	$: selectedSubCategory = {
		label: subCategory,
		value: subCategory
	};

And assigned it to the selected prop of the second select component.

<Select.Root
		selected={selectedSubCategory}
		onSelectedChange={(v) => {
			subCategory = v?.label;
		}}
	>

Now, any changes to the first select will reset the second one. 🤷‍♂️

Screen.Recording.2024-05-22.at.12.16.23.mov

[MattHeslington]

@shyakadavis You're a star! Nice one, and many thanks. I've spent so long trying to figure this out