fix(ui): improve placeholder handling and label sorting in WdsSelect component

- Enhanced logic to conditionally add a placeholder based on existing options.
- Updated label retrieval to ensure proper sorting for multi-selection scenarios.
- Refined filtering of options to maintain clarity in the dropdown display.

Author: sheikhuzairhussain

src/ui/src/wds/WdsSelect.vue

@@ -150,7 +150,14 @@ const selectOptions = computed<WdsDropdownMenuOption[]>(() => {
 			(option.value !== undefined ? String(option.value) : ""),
 	}));
 
-	if (!shouldInjectPlaceholder.value) {
+	const hasEmptyValueOption = normalized.some(
+		(option) => option.value === PLACEHOLDER_VALUE,
+	);
+
+	const shouldAddPlaceholder =
+		shouldInjectPlaceholder.value && !hasEmptyValueOption;
+
+	if (!shouldAddPlaceholder) {
 		return normalized;
 	}
 
@@ -160,10 +167,7 @@ const selectOptions = computed<WdsDropdownMenuOption[]>(() => {
 			label: placeholderLabel.value,
 			isPlaceholder: true,
 		},
-		...normalized.filter(
-			(option) =>
-				!option.isPlaceholder && option.value !== PLACEHOLDER_VALUE,
-		),
+		...normalized.filter((option) => !option.isPlaceholder),
 	];
 });
 
@@ -200,10 +204,13 @@ const currentLabel = computed(() => {
 			: String(currentValue.value ?? "");
 	}
 
-	if (!selectedOptions.value.length) return undefined;
+	const labels = selectedOptions.value.map((o) => o.label).filter(Boolean);
+	if (!labels.length) return undefined;
+
+	const sortedLabels = [...labels].sort((a, b) => a.localeCompare(b));
 	return props.enableMultiSelection
-		? selectedOptions.value.map((o) => o.label).join(" / ")
-		: selectedOptions.value[0].label;
+		? sortedLabels.join(" / ")
+		: sortedLabels[0];
 });
 
 const currentIcon = computed(() => {