From 079c55d752c1c1242cd507ea7818fb98a6ee4d83 Mon Sep 17 00:00:00 2001
From: Deng Junhai <DengJunHai@foxmail.com>
Date: Sun, 31 Mar 2024 00:29:32 +0800
Subject: [PATCH] fix: fix multi combobox value is not in list candidate set
 issue

fix: fix multi combobox value is not in list candidate set issue
Co-Authored-By: Minghan Zhang <112773885+zmh-program@users.noreply.github.com>
---
 app/src/components/app/Announcement.tsx  | 8 ++++----
 app/src/components/ui/combo-box.tsx      | 4 ++--
 app/src/components/ui/dialog.tsx         | 8 +++++---
 app/src/components/ui/multi-combobox.tsx | 4 ++--
 4 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/app/src/components/app/Announcement.tsx b/app/src/components/app/Announcement.tsx
index a03743b..82d4b4c 100644
--- a/app/src/components/app/Announcement.tsx
+++ b/app/src/components/app/Announcement.tsx
@@ -44,9 +44,7 @@ function Announcement() {
         </DialogTrigger>
       <DialogContent className={`announcement-dialog flex-dialog`}>
         <DialogHeader notTextCentered>
-          <DialogTitle
-            className={"flex flex-row items-center select-none"}
-          >
+          <DialogTitle className={"flex flex-row items-center select-none"}>
             <Bell className="inline-block w-4 h-4 mr-2" />
             <p className={`translate-y-[-1px]`}>{t("announcement")}</p>
           </DialogTitle>
@@ -55,7 +53,9 @@ function Announcement() {
           </DialogDescription>
         </DialogHeader>
         <DialogFooter>
-          <DialogCancel onClick={() => setOpen(false)}>{t("close")}</DialogCancel>
+          <DialogCancel onClick={() => setOpen(false)}>
+            {t("close")}
+          </DialogCancel>
           <DialogAction onClick={() => setOpen(false)}>
             <Check className="w-4 h-4 mr-1" />
             {t("i-know")}
diff --git a/app/src/components/ui/combo-box.tsx b/app/src/components/ui/combo-box.tsx
index 743a355..b2453a1 100644
--- a/app/src/components/ui/combo-box.tsx
+++ b/app/src/components/ui/combo-box.tsx
@@ -39,8 +39,8 @@ export function Combobox({
   const { t } = useTranslation();
   const [open, setOpen] = React.useState(defaultOpen ?? false);
   const valueList = React.useMemo((): string[] => {
-    // list set
-    const set = new Set(list);
+    // list set (if some element in current value is not in list, it will be added)
+    const set = new Set([...list, value]);
     return [...set];
   }, [list]);
 
diff --git a/app/src/components/ui/dialog.tsx b/app/src/components/ui/dialog.tsx
index 5d7d90e..889b276 100644
--- a/app/src/components/ui/dialog.tsx
+++ b/app/src/components/ui/dialog.tsx
@@ -64,7 +64,7 @@ const DialogHeader = ({
   className,
   notTextCentered,
   ...props
-}: React.HTMLAttributes<HTMLDivElement> & {notTextCentered?: boolean}) => (
+}: React.HTMLAttributes<HTMLDivElement> & { notTextCentered?: boolean }) => (
   <div
     className={cn(
       "flex flex-col space-y-1.5 sm:text-left",
@@ -121,10 +121,11 @@ const DialogCancel = React.forwardRef<HTMLButtonElement, ButtonProps>(
   ({ className, variant, ...props }, ref) => (
     <Button
       ref={ref}
+      className={className}
       variant={variant ?? "outline"}
       {...props}
     />
-  )
+  ),
 );
 
 DialogCancel.displayName = "DialogCancel";
@@ -133,10 +134,11 @@ const DialogAction = React.forwardRef<HTMLButtonElement, ButtonProps>(
   ({ className, variant, ...props }, ref) => (
     <Button
       ref={ref}
+      className={cn("mb-2 md:mb-0", className)}
       variant={variant ?? "default"}
       {...props}
     />
-  )
+  ),
 );
 DialogAction.displayName = "DialogAction";
 
diff --git a/app/src/components/ui/multi-combobox.tsx b/app/src/components/ui/multi-combobox.tsx
index 0b67d0f..52bcdeb 100644
--- a/app/src/components/ui/multi-combobox.tsx
+++ b/app/src/components/ui/multi-combobox.tsx
@@ -49,8 +49,8 @@ export function MultiCombobox({
   const { t } = useTranslation();
   const [open, setOpen] = React.useState(defaultOpen ?? false);
   const valueList = React.useMemo((): string[] => {
-    // list set
-    const set = new Set(list);
+    // list set (if some element in current value is not in list, it will be added)
+    const set = new Set([...list, ...value]);
     return [...set];
   }, [list]);