🐛 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,48 +32,65 @@ 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>
-          {isNotEmpty(background?.content) ? (
-            <Image
-              src={background?.content}
-              alt={t('theme.sideMenu.global.background.image.alt')}
-              cursor="pointer"
-              _hover={{ filter: 'brightness(.9)' }}
-              transition="filter 200ms"
-              rounded="md"
-              maxH="200px"
-              objectFit="cover"
-            />
-          ) : (
-            <Button>
-              {t('theme.sideMenu.global.background.image.button')}
-            </Button>
-          )}
-        </PopoverTrigger>
-        <Portal>
-          <PopoverContent p="4" w="500px">
-            <ImageUploadContent
-              uploadFileProps={{
-                workspaceId: typebot.workspaceId,
-                typebotId: typebot.id,
-                fileName: 'background',
-              }}
-              defaultUrl={background?.content}
-              onSubmit={handleContentChange}
-              excludedTabs={['giphy', 'icon']}
-            />
-          </PopoverContent>
-        </Portal>
-      </Popover>
+      <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 onClick={onOpen} w="full">
+                {t('theme.sideMenu.global.background.image.button')}
+              </Button>
+            )}
+          </PopoverAnchor>
+          <Portal>
+            <PopoverContent
+              p="4"
+              w="500px"
+              onMouseDown={(e) => e.stopPropagation()}
+              onPointerDown={(e) => e.stopPropagation()}
+            >
+              <ImageUploadContent
+                uploadFileProps={{
+                  workspaceId: typebot.workspaceId,
+                  typebotId: typebot.id,
+                  fileName: 'background',
+                }}
+                defaultUrl={background?.content}
+                onSubmit={handleContentChange}
+                excludedTabs={['giphy', 'icon']}
+              />
+            </PopoverContent>
+          </Portal>
+        </Popover>
+      </Flex>
     )
   }
   if ((background?.type ?? defaultBackgroundType) === BackgroundType.COLOR) {