From 618eb8a8827e1789d9041b34e6d0a474c74436ea Mon Sep 17 00:00:00 2001
From: Baptiste Arnaud <contact@baptiste-arnaud.fr>
Date: Thu, 16 Feb 2023 17:09:02 +0100
Subject: [PATCH] :wheelchair: (editor) Improve variables popover click
 detection

---
 .../variables/components/VariablesButton.tsx  | 28 ++++++++++++++-----
 apps/builder/src/lib/plate.tsx                |  4 +--
 2 files changed, 23 insertions(+), 9 deletions(-)

diff --git a/apps/builder/src/features/variables/components/VariablesButton.tsx b/apps/builder/src/features/variables/components/VariablesButton.tsx
index 0676e3027..b51f7a11f 100644
--- a/apps/builder/src/features/variables/components/VariablesButton.tsx
+++ b/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
diff --git a/apps/builder/src/lib/plate.tsx b/apps/builder/src/lib/plate.tsx
index 713055db3..18eb8d7bf 100644
--- a/apps/builder/src/lib/plate.tsx
+++ b/apps/builder/src/lib/plate.tsx
@@ -27,8 +27,8 @@ export const platePlugins = createPlugins(
           url.startsWith('https:') ||
           url.startsWith('mailto:') ||
           url.startsWith('tel:') ||
-          url.startsWith('sms:') ||
-          (url.startsWith('{{') && url.endsWith('}}')),
+          url.startsWith('sms:'),
+        forceSubmit: true,
       },
     }),
   ],