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('"', '"'));
+};
+
+const desanitize = (value: string) => {
+ return decodeURIComponent(value).replaceAll('"', '"');
+};
+
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 (
{
@@ -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}
>
- {item?.label ?? item?.value}
+ {desanitize(item?.label ?? item?.value)}
);
};
@@ -133,7 +142,11 @@ export function ComboboxAdvanced({
/>
({
+ ...item,
+ label: sanitize(item.label),
+ value: sanitize(item.value),
+ }))}
itemHeight={32}
itemKey="value"
>