From 4230f47be911c7be21d7055b01f7548b6bf2436e Mon Sep 17 00:00:00 2001
From: Baptiste Arnaud <contact@baptiste-arnaud.fr>
Date: Fri, 26 May 2023 18:06:46 +0200
Subject: [PATCH] :bug: Fix outside click on picture choice

---
 .../components/PictureChoiceItemSettings.tsx  | 37 ++++++++++---------
 .../BubbleSettings/ButtonThemeSettings.tsx    | 35 +++++++++---------
 2 files changed, 38 insertions(+), 34 deletions(-)

diff --git a/apps/builder/src/features/blocks/inputs/pictureChoice/components/PictureChoiceItemSettings.tsx b/apps/builder/src/features/blocks/inputs/pictureChoice/components/PictureChoiceItemSettings.tsx
index 7ffa3f2a4..2e5f675dd 100644
--- a/apps/builder/src/features/blocks/inputs/pictureChoice/components/PictureChoiceItemSettings.tsx
+++ b/apps/builder/src/features/blocks/inputs/pictureChoice/components/PictureChoiceItemSettings.tsx
@@ -5,11 +5,10 @@ import {
   Button,
   HStack,
   Popover,
-  PopoverAnchor,
   PopoverContent,
+  PopoverTrigger,
   Stack,
   Text,
-  useDisclosure,
 } from '@chakra-ui/react'
 import { ImageUploadContent } from '@/components/ImageUploadContent'
 
@@ -24,12 +23,10 @@ export const PictureChoiceItemSettings = ({
   item,
   onItemChange,
 }: Props) => {
-  const { isOpen, onOpen, onClose } = useDisclosure()
   const updateTitle = (title: string) => onItemChange({ ...item, title })
 
   const updateImage = (pictureSrc: string) => {
     onItemChange({ ...item, pictureSrc })
-    onClose()
   }
 
   const updateDescription = (description: string) =>
@@ -39,19 +36,25 @@ export const PictureChoiceItemSettings = ({
     <Stack>
       <HStack>
         <Text fontWeight="medium">Image:</Text>
-        <Popover isLazy isOpen={isOpen}>
-          <PopoverAnchor>
-            <Button size="sm" onClick={onOpen}>
-              Pick an image
-            </Button>
-          </PopoverAnchor>
-          <PopoverContent p="4" w="500px">
-            <ImageUploadContent
-              filePath={`typebots/${typebotId}/blocks/${item.blockId}/items/${item.id}`}
-              defaultUrl={item.pictureSrc}
-              onSubmit={updateImage}
-            />
-          </PopoverContent>
+        <Popover isLazy>
+          {({ onClose }) => (
+            <>
+              <PopoverTrigger>
+                <Button size="sm">Pick an image</Button>
+              </PopoverTrigger>
+              <PopoverContent p="4" w="500px">
+                <ImageUploadContent
+                  filePath={`typebots/${typebotId}/blocks/${item.blockId}/items/${item.id}`}
+                  defaultUrl={item.pictureSrc}
+                  onSubmit={(url) => {
+                    updateImage(url)
+                    onClose()
+                  }}
+                  excludedTabs={['emoji']}
+                />
+              </PopoverContent>
+            </>
+          )}
         </Popover>
       </HStack>
       <TextInput
diff --git a/apps/builder/src/features/publish/components/embeds/settings/BubbleSettings/ButtonThemeSettings.tsx b/apps/builder/src/features/publish/components/embeds/settings/BubbleSettings/ButtonThemeSettings.tsx
index 2aa1d7f70..a8dd6819f 100644
--- a/apps/builder/src/features/publish/components/embeds/settings/BubbleSettings/ButtonThemeSettings.tsx
+++ b/apps/builder/src/features/publish/components/embeds/settings/BubbleSettings/ButtonThemeSettings.tsx
@@ -10,11 +10,10 @@ import {
   MenuItem,
   MenuList,
   Popover,
-  PopoverAnchor,
   PopoverContent,
+  PopoverTrigger,
   Stack,
   Text,
-  useDisclosure,
 } from '@chakra-ui/react'
 import { ButtonTheme } from '@typebot.io/js/dist/features/bubble/types'
 import React from 'react'
@@ -25,8 +24,6 @@ type Props = {
 }
 
 export const ButtonThemeSettings = ({ buttonTheme, onChange }: Props) => {
-  const { isOpen, onOpen, onClose } = useDisclosure()
-
   const updateBackgroundColor = (backgroundColor: string) => {
     onChange({
       ...buttonTheme,
@@ -39,7 +36,6 @@ export const ButtonThemeSettings = ({ buttonTheme, onChange }: Props) => {
       ...buttonTheme,
       customIconSrc,
     })
-    onClose()
   }
 
   const updateSize = (size: ButtonTheme['size']) =>
@@ -73,18 +69,23 @@ export const ButtonThemeSettings = ({ buttonTheme, onChange }: Props) => {
         </HStack>
         <HStack justify="space-between">
           <Text>Custom icon</Text>
-          <Popover isLazy isOpen={isOpen}>
-            <PopoverAnchor>
-              <Button size="sm" onClick={onOpen}>
-                Pick an image
-              </Button>
-            </PopoverAnchor>
-            <PopoverContent p="4" w="500px">
-              <ImageUploadContent
-                onSubmit={updateCustomIconSrc}
-                filePath={undefined}
-              />
-            </PopoverContent>
+          <Popover isLazy>
+            {({ onClose }) => (
+              <>
+                <PopoverTrigger>
+                  <Button size="sm">Pick an image</Button>
+                </PopoverTrigger>
+                <PopoverContent p="4" w="500px">
+                  <ImageUploadContent
+                    onSubmit={(url) => {
+                      updateCustomIconSrc(url)
+                      onClose()
+                    }}
+                    filePath={undefined}
+                  />
+                </PopoverContent>
+              </>
+            )}
           </Popover>
         </HStack>
       </Stack>