Repository: melt-ui/melt-ui (ts)

Issue:
🐛Bug: multi-select doesn't correctly set `data-selected` or `aria-selected`
**Describe the bug**
When `multiple` is set to `true`, `$isSelected` works properly, but `data-selected` and `aria-selected` don't get set properly.

**To Reproduce**
Steps to reproduce the behavior:
1. Go to the [Melt UI Select docs](https://www.melt-ui.com/docs/builders/select)
2. Scroll down to the Multi-Select example
3. Select any option and inspect the option, observe that `data-selected` is not present and that `aria-selected` is set to `false`.

**Expected behavior**
`data-selected` should exist and `aria-selected` should be set to `true`

**Screenshots**
![image](https://github.com/melt-ui/melt-ui/assets/13283469/e39577b0-0591-432f-baa9-3302644f1a7d)


**Desktop (please complete the following information):**
 - OS: MacOS
 - Browser: Brave
 - Version: [Version 1.56.20 Chromium: 115.0.5790.171 (Official Build) (arm64)](https://brave.com/latest/)



Pull request:
Resolve multi-select bug
resolves #371 

Patch:
diff --git a/.changeset/plenty-hotels-glow.md b/.changeset/plenty-hotels-glow.md
new file mode 100644
index 00000000..7d92cfcd
--- /dev/null
+++ b/.changeset/plenty-hotels-glow.md
@@ -0,0 +1,5 @@
+---
+'@melt-ui/svelte': patch
+---
+
+Resolves a bug in select builder when multi-select is active where data-selected and aria-selected were not being set properly
diff --git a/src/lib/builders/select/create.ts b/src/lib/builders/select/create.ts
index 0cfbf7bf..37c3eedd 100644
--- a/src/lib/builders/select/create.ts
+++ b/src/lib/builders/select/create.ts
@@ -482,10 +482,13 @@ export function createSelect<
 					disabled: props.disabled ?? false,
 				};
 				optionsList.push(optProps);
+
+				const isSelected = Array.isArray($value) ? $value.includes(props?.value) : $value === props?.value;
+
 				return {
 					role: 'option',
-					'aria-selected': $value === props?.value,
-					'data-selected': $value === props?.value ? '' : undefined,
+					'aria-selected': isSelected,
+					'data-selected': isSelected ? '' : undefined,
 					'data-value': JSON.stringify(props.value),
 					'data-label': props.label ?? undefined,
 					'data-disabled': props.disabled ? '' : undefined,


Test patch:
diff --git a/src/tests/select/Select.spec.ts b/src/tests/select/Select.spec.ts
index e787fb68..169fa356 100644
--- a/src/tests/select/Select.spec.ts
+++ b/src/tests/select/Select.spec.ts
@@ -123,6 +123,9 @@ describe('Select (Default)', () => {
 		if (!firstItem) throw new Error('No option found');
 		await user.click(firstItem);
 
+		await expect(firstItem).toHaveAttribute('data-selected')
+		await expect(firstItem).toHaveAttribute('aria-selected', "true")
+
 		await expect(menu).not.toBeVisible();
 		await expect(trigger).toHaveTextContent('Caramel');
 
@@ -133,6 +136,9 @@ describe('Select (Default)', () => {
 		if (!secondItem) throw new Error('No option found');
 		await user.click(secondItem);
 
+		await expect(secondItem).toHaveAttribute('data-selected')
+		await expect(secondItem).toHaveAttribute('aria-selected', "true")
+
 		await expect(menu).not.toBeVisible();
 		await expect(trigger).toHaveTextContent('Caramel, Chocolate');
 	});