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 <[email protected]>
coaidev · Mar 30, 2024 · 079c55d · 079c55d
1 parent 03512d0
commit 079c55d
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 11 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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]);