From 0ddd1f6d061a5cb9c68c91d5e19eada9c9363545 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Carl-Gerhard=20Lindesva=CC=88rd?= <lindesvard@gmail.com>
Date: Fri, 7 Nov 2025 15:30:57 +0100
Subject: [PATCH] fix: broken properties selector

---
 .../src/components/ui/combobox-advanced.tsx   | 25 ++++++++++++++-----
 1 file changed, 19 insertions(+), 6 deletions(-)

diff --git a/apps/start/src/components/ui/combobox-advanced.tsx b/apps/start/src/components/ui/combobox-advanced.tsx
index 926bc83a..b8751ab6 100644
--- a/apps/start/src/components/ui/combobox-advanced.tsx
+++ b/apps/start/src/components/ui/combobox-advanced.tsx
@@ -18,6 +18,14 @@ import {
 type IValue = any;
 type IItem = Record<'value' | 'label', IValue>;
 
+const sanitize = (value: string) => {
+  return encodeURIComponent(value.replaceAll('"', '&quot;'));
+};
+
+const desanitize = (value: string) => {
+  return decodeURIComponent(value).replaceAll('&quot;', '"');
+};
+
 interface ComboboxAdvancedProps {
   value: IValue[];
   onChange: (value: IValue[]) => void;
@@ -51,7 +59,7 @@ export function ComboboxAdvanced({
     );
 
   const renderItem = (item: IItem) => {
-    const checked = !!value.find((s) => s === item.value);
+    const checked = !!value.find((s) => s === desanitize(item.value));
     return (
       <CommandItem
         onMouseDown={(e) => {
@@ -61,15 +69,16 @@ export function ComboboxAdvanced({
         onSelect={() => {
           setInputValue('');
           onChange(
-            value.includes(item.value)
-              ? value.filter((s) => s !== item.value)
-              : [...value, item.value],
+            value.includes(desanitize(item.value))
+              ? value.filter((s) => s !== desanitize(item.value))
+              : [...value, desanitize(item.value)],
           );
         }}
         className={'flex cursor-pointer items-center gap-2'}
+        value={item.value}
       >
         <DumpCheckbox checked={checked} />
-        {item?.label ?? item?.value}
+        {desanitize(item?.label ?? item?.value)}
       </CommandItem>
     );
   };
@@ -133,7 +142,11 @@ export function ComboboxAdvanced({
             />
             <VirtualList
               height={Math.min(items.length * 32, 300)}
-              data={data}
+              data={data.map((item) => ({
+                ...item,
+                label: sanitize(item.label),
+                value: sanitize(item.value),
+              }))}
               itemHeight={32}
               itemKey="value"
             >