fix: hide popover when user selects a recipients

packages/ui/primitives/document-flow/add-fields.tsx

@@ -22,7 +22,12 @@ import {
   CommandInput,
   CommandItem,
 } from '@documenso/ui/primitives/command';
-import { Popover, PopoverContent, PopoverTrigger } from '@documenso/ui/primitives/popover';
+import {
+  Popover,
+  PopoverClose,
+  PopoverContent,
+  PopoverTrigger,
+} from '@documenso/ui/primitives/popover';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@documenso/ui/primitives/tooltip';
 
 import { TAddFieldsFormSchema } from './add-fields.types';
@@ -324,7 +329,7 @@ export const AddFieldsFormPartial = ({
                 >
                   {selectedSigner?.email && (
                     <span className="flex-1 truncate text-left">
-                      {selectedSigner?.email} ({selectedSigner?.email})
+                      {selectedSigner?.name} ({selectedSigner?.email})
                     </span>
                   )}
 
@@ -345,10 +350,13 @@ export const AddFieldsFormPartial = ({
                     {recipients.map((recipient, index) => (
                       <CommandItem
                         key={index}
-                        className={cn({
+                        className="p-0"
+                        onSelect={() => setSelectedSigner(recipient)}
+                      >
+                        <PopoverClose
+                          className={cn('flex w-full px-1 py-2', {
                             'text-muted-foreground': recipient.sendStatus === SendStatus.SENT,
                           })}
-                        onSelect={() => setSelectedSigner(recipient)}
                         >
                           {recipient.sendStatus !== SendStatus.SENT ? (
                             <Check
@@ -384,6 +392,7 @@ export const AddFieldsFormPartial = ({
                               {recipient.email}
                             </span>
                           )}
+                        </PopoverClose>
                       </CommandItem>
                     ))}
                   </CommandGroup>

packages/ui/primitives/popover.tsx

@@ -10,6 +10,8 @@ const Popover = PopoverPrimitive.Root;
 
 const PopoverTrigger = PopoverPrimitive.Trigger;
 
+const PopoverClose = PopoverPrimitive.Close;
+
 const PopoverContent = React.forwardRef<
   React.ElementRef<typeof PopoverPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
@@ -30,4 +32,4 @@ const PopoverContent = React.forwardRef<
 
 PopoverContent.displayName = PopoverPrimitive.Content.displayName;
 
-export { Popover, PopoverTrigger, PopoverContent };
+export { Popover, PopoverTrigger, PopoverContent, PopoverClose };