fix(dashboard): Hide typed tag when it's suggested (#7039)

novuhq · Nov 18, 2024 · 66e5d41 · 66e5d41
1 parent 2c938e9
commit 66e5d41
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 8 deletions.
diff --git a/apps/dashboard/src/components/primitives/popover.tsx b/apps/dashboard/src/components/primitives/popover.tsx
@@ -1,5 +1,5 @@
-import * as React from 'react';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
+import * as React from 'react';
 
 import { cn } from '@/utils/ui';
 
@@ -23,7 +23,7 @@ const PopoverContent = React.forwardRef<
       align={align}
       sideOffset={sideOffset}
       className={cn(
-        `bg-background text-foreground-950 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-72 rounded-md border p-4 shadow-md outline-none ${arrowClipPathClassName}`,
+        `bg-background text-foreground-950 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-72 overflow-auto rounded-md border p-4 shadow-md outline-none ${arrowClipPathClassName}`,
         className
       )}
       {...props}
@@ -48,4 +48,4 @@ const PopoverArrow = React.forwardRef<
 
 PopoverContent.displayName = PopoverPrimitive.Content.displayName;
 
-export { Popover, PopoverTrigger, PopoverContent, PopoverArrow, PopoverAnchor, PopoverPortal };
+export { Popover, PopoverAnchor, PopoverArrow, PopoverContent, PopoverPortal, PopoverTrigger };
diff --git a/apps/dashboard/src/components/primitives/tag-input.tsx b/apps/dashboard/src/components/primitives/tag-input.tsx
@@ -1,13 +1,13 @@
 'use client';
 
 import { Badge } from '@/components/primitives/badge';
-import { Popover, PopoverAnchor, PopoverContent } from '@/components/primitives/popover';
 import { CommandGroup, CommandInput, CommandItem, CommandList } from '@/components/primitives/command';
+import { inputVariants } from '@/components/primitives/input';
+import { Popover, PopoverAnchor, PopoverContent } from '@/components/primitives/popover';
 import { cn } from '@/utils/ui';
 import { Command } from 'cmdk';
 import { forwardRef, useEffect, useMemo, useState } from 'react';
 import { RiCloseFill } from 'react-icons/ri';
-import { inputVariants } from '@/components/primitives/input';
 
 type TagInputProps = React.InputHTMLAttributes<HTMLInputElement> & {
   value: string[];
@@ -54,7 +54,7 @@ const TagInput = forwardRef<HTMLInputElement, TagInputProps>((props, ref) => {
 
   return (
     <Popover open={isOpen}>
-      <Command>
+      <Command loop>
         <div className="flex flex-col gap-2">
           <PopoverAnchor asChild>
             <CommandInput
@@ -87,7 +87,7 @@ const TagInput = forwardRef<HTMLInputElement, TagInputProps>((props, ref) => {
         <CommandList>
           {(validSuggestions.length > 0 || inputValue !== '') && (
             <PopoverContent
-              className="w-32 p-1"
+              className="max-h-64 w-32 p-1"
               portal={false}
               onOpenAutoFocus={(e) => {
                 e.preventDefault();
@@ -96,12 +96,13 @@ const TagInput = forwardRef<HTMLInputElement, TagInputProps>((props, ref) => {
               onInteractOutside={(e) => e.preventDefault()}
             >
               <CommandGroup>
-                {inputValue !== '' && (
+                {inputValue !== '' && !validSuggestions.includes(inputValue) && (
                   <CommandItem
                     value={inputValue}
                     onSelect={() => {
                       addTag(inputValue);
                     }}
+                    className="gap-1"
                     disabled={inputValue === '' || tags.includes(inputValue)}
                   >
                     {inputValue}