blsmedia/bot
2
0
Fork 0
Code Activity

🐛 Fix searchable dropdown z-index issues

Browse Source 
Closes #288
This commit is contained in:
Baptiste Arnaud
2023-02-06 08:44:43 +01:00
parent 4e0df33551
commit 2b36cedb7b
2 changed files with 40 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
apps/builder/src/components/SearchableDropdown.tsx
View File

@ -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,40 +195,44 @@ export const SearchableDropdown = ({
)}
</HStack>
</PopoverAnchor>
<PopoverContent
maxH="35vh"
overflowY="scroll"
role="menu"
w="inherit"
shadow="lg"
>
{filteredItems.length > 0 && (
<>
{filteredItems.map((item, idx) => {
return (
<Button
ref={(el) => (itemsRef.current[idx] = el)}
minH="40px"
key={idx}
onClick={handleItemClick(
typeof item === 'string' ? item : item.value
)}
fontSize="16px"
fontWeight="normal"
rounded="none"
colorScheme="gray"
role="menuitem"
variant="ghost"
bg={keyboardFocusIndex === idx ? bg : 'transparent'}
justifyContent="flex-start"
>
{typeof item === 'string' ? item : item.label}
</Button>
)
})}
</>
)}
</PopoverContent>
<Portal>
<PopoverContent
maxH="35vh"
overflowY="scroll"
role="menu"
w="inherit"
shadow="lg"
onMouseDown={(e) => e.stopPropagation()}
onPointerDown={(e) => e.stopPropagation()}
>
{filteredItems.length > 0 && (
<>
{filteredItems.map((item, idx) => {
return (
<Button
ref={(el) => (itemsRef.current[idx] = el)}
minH="40px"
key={idx}
onClick={handleItemClick(
typeof item === 'string' ? item : item.value
)}
fontSize="16px"
fontWeight="normal"
rounded="none"
colorScheme="gray"
role="menuitem"
variant="ghost"
bg={keyboardFocusIndex === idx ? bg : 'transparent'}
justifyContent="flex-start"
>
{typeof item === 'string' ? item : item.label}
</Button>
)
})}
</>
)}
</PopoverContent>
</Portal>
</Popover>
</Flex>
)

1
apps/builder/src/features/blocks/logic/typebotLink/typebotLink.spec.ts
View File

@ -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')