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" >