🐛 Fix background image popover closing on variable select

Closes #1755

apps/builder/src/features/theme/components/general/BackgroundContent.tsx

@@ -4,11 +4,12 @@ import {
   Flex,
   Popover,
   PopoverContent,
-  PopoverTrigger,
   Text,
   Image,
   Button,
   Portal,
+  PopoverAnchor,
+  useDisclosure,
 } from '@chakra-ui/react'
 import { isNotEmpty } from '@typebot.io/lib'
 import { Background } from '@typebot.io/schemas'
@@ -20,6 +21,7 @@ import {
   defaultBackgroundType,
 } from '@typebot.io/schemas/features/typebot/theme/constants'
 import { useTranslate } from '@tolgee/react'
+import { useOutsideClick } from '@/hooks/useOutsideClick'
 
 type BackgroundContentProps = {
   background?: Background
@@ -30,35 +32,51 @@ export const BackgroundContent = ({
   background,
   onBackgroundContentChange,
 }: BackgroundContentProps) => {
+  const { isOpen, onClose, onOpen } = useDisclosure()
   const { t } = useTranslate()
   const { typebot } = useTypebot()
   const handleContentChange = (content: string) =>
     onBackgroundContentChange(content)
+  const popoverContainerRef = React.useRef<HTMLDivElement>(null)
+
+  useOutsideClick({
+    ref: popoverContainerRef,
+    handler: onClose,
+    isEnabled: isOpen,
+  })
 
   if ((background?.type ?? defaultBackgroundType) === BackgroundType.IMAGE) {
     if (!typebot) return null
     return (
-      <Popover isLazy placement="top">
-        <PopoverTrigger>
+      <Flex ref={popoverContainerRef}>
+        <Popover isLazy isOpen={isOpen} placement="top">
+          <PopoverAnchor>
             {isNotEmpty(background?.content) ? (
               <Image
                 src={background?.content}
                 alt={t('theme.sideMenu.global.background.image.alt')}
+                onClick={onOpen}
                 cursor="pointer"
                 _hover={{ filter: 'brightness(.9)' }}
                 transition="filter 200ms"
                 rounded="md"
+                w="full"
                 maxH="200px"
                 objectFit="cover"
               />
             ) : (
-            <Button>
+              <Button onClick={onOpen} w="full">
                 {t('theme.sideMenu.global.background.image.button')}
               </Button>
             )}
-        </PopoverTrigger>
+          </PopoverAnchor>
           <Portal>
-          <PopoverContent p="4" w="500px">
+            <PopoverContent
+              p="4"
+              w="500px"
+              onMouseDown={(e) => e.stopPropagation()}
+              onPointerDown={(e) => e.stopPropagation()}
+            >
               <ImageUploadContent
                 uploadFileProps={{
                   workspaceId: typebot.workspaceId,
@@ -72,6 +90,7 @@ export const BackgroundContent = ({
             </PopoverContent>
           </Portal>
         </Popover>
+      </Flex>
     )
   }
   if ((background?.type ?? defaultBackgroundType) === BackgroundType.COLOR) {