♿ (editor) Improve variables popover click detection

apps/builder/src/features/variables/components/VariablesButton.tsx

@@ -1,39 +1,53 @@
 import {
   Popover,
-  PopoverTrigger,
   Flex,
   Tooltip,
   IconButton,
   PopoverContent,
   IconButtonProps,
+  useDisclosure,
+  PopoverAnchor,
 } from '@chakra-ui/react'
 import { UserIcon } from '@/components/icons'
 import { Variable } from 'models'
-import React from 'react'
+import React, { useRef } from 'react'
 import { VariableSearchInput } from '@/components/VariableSearchInput'
+import { useOutsideClick } from '@/hooks/useOutsideClick'
 
 type Props = {
   onSelectVariable: (variable: Pick<Variable, 'name' | 'id'>) => void
 } & Omit<IconButtonProps, 'aria-label'>
 
 export const VariablesButton = ({ onSelectVariable, ...props }: Props) => {
+  const { isOpen, onOpen, onClose } = useDisclosure()
+  const popoverRef = useRef<HTMLDivElement>(null)
+
+  useOutsideClick({
+    ref: popoverRef,
+    handler: onClose,
+  })
+
   return (
-    <Popover isLazy placement="bottom-end" gutter={0}>
-      <PopoverTrigger>
+    <Popover isLazy placement="bottom-end" gutter={0} isOpen={isOpen}>
+      <PopoverAnchor>
         <Flex>
           <Tooltip label="Insert a variable">
             <IconButton
               aria-label={'Insert a variable'}
               icon={<UserIcon />}
               pos="relative"
+              onClick={onOpen}
               {...props}
             />
           </Tooltip>
         </Flex>
-      </PopoverTrigger>
-      <PopoverContent w="full">
+      </PopoverAnchor>
+      <PopoverContent w="full" ref={popoverRef}>
         <VariableSearchInput
-          onSelectVariable={onSelectVariable}
+          onSelectVariable={(variable) => {
+            onClose()
+            onSelectVariable(variable)
+          }}
           placeholder="Search for a variable"
           shadow="lg"
           autoFocus