🐛 Fix searchable dropdown z-index issues

Closes #288

apps/builder/src/components/SearchableDropdown.tsx

@@ -9,6 +9,7 @@ import {
   HStack,
   useColorModeValue,
   PopoverAnchor,
+  Portal,
 } from '@chakra-ui/react'
 import { Variable } from 'models'
 import { useState, useRef, useEffect, ChangeEvent, ReactNode } from 'react'
@@ -194,12 +195,15 @@ export const SearchableDropdown = ({
             )}
           </HStack>
         </PopoverAnchor>
+        <Portal>
           <PopoverContent
             maxH="35vh"
             overflowY="scroll"
             role="menu"
             w="inherit"
             shadow="lg"
+            onMouseDown={(e) => e.stopPropagation()}
+            onPointerDown={(e) => e.stopPropagation()}
           >
             {filteredItems.length > 0 && (
               <>
@@ -228,6 +232,7 @@ export const SearchableDropdown = ({
               </>
             )}
           </PopoverContent>
+        </Portal>
       </Popover>
     </Flex>
   )

apps/builder/src/features/blocks/logic/typebotLink/typebotLink.spec.ts

@@ -50,6 +50,7 @@ test('should be configurable', async ({ page }) => {
 
   await page.click('[aria-label="Close"]')
   await page.click('text=Jump to Start in My link typebot 2')
+  await page.waitForTimeout(1000)
   await page.click('input[value="My link typebot 2"]', { clickCount: 3 })
   await page.press('input[value="My link typebot 2"]', 'Backspace')
   await page.click('button >> text=My link typebot 1')