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, HStack,
useColorModeValue, useColorModeValue,
PopoverAnchor, PopoverAnchor,
Portal,
} from '@chakra-ui/react' } from '@chakra-ui/react'
import { Variable } from 'models' import { Variable } from 'models'
import { useState, useRef, useEffect, ChangeEvent, ReactNode } from 'react' import { useState, useRef, useEffect, ChangeEvent, ReactNode } from 'react'
@ -194,40 +195,44 @@ export const SearchableDropdown = ({
)} )}
</HStack> </HStack>
</PopoverAnchor> </PopoverAnchor>
<PopoverContent <Portal>
maxH="35vh" <PopoverContent
overflowY="scroll" maxH="35vh"
role="menu" overflowY="scroll"
w="inherit" role="menu"
shadow="lg" w="inherit"
> shadow="lg"
{filteredItems.length > 0 && ( onMouseDown={(e) => e.stopPropagation()}
<> onPointerDown={(e) => e.stopPropagation()}
{filteredItems.map((item, idx) => { >
return ( {filteredItems.length > 0 && (
<Button <>
ref={(el) => (itemsRef.current[idx] = el)} {filteredItems.map((item, idx) => {
minH="40px" return (
key={idx} <Button
onClick={handleItemClick( ref={(el) => (itemsRef.current[idx] = el)}
typeof item === 'string' ? item : item.value minH="40px"
)} key={idx}
fontSize="16px" onClick={handleItemClick(
fontWeight="normal" typeof item === 'string' ? item : item.value
rounded="none" )}
colorScheme="gray" fontSize="16px"
role="menuitem" fontWeight="normal"
variant="ghost" rounded="none"
bg={keyboardFocusIndex === idx ? bg : 'transparent'} colorScheme="gray"
justifyContent="flex-start" role="menuitem"
> variant="ghost"
{typeof item === 'string' ? item : item.label} bg={keyboardFocusIndex === idx ? bg : 'transparent'}
</Button> justifyContent="flex-start"
) >
})} {typeof item === 'string' ? item : item.label}
</> </Button>
)} )
</PopoverContent> })}
</>
)}
</PopoverContent>
</Portal>
</Popover> </Popover>
</Flex> </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('[aria-label="Close"]')
await page.click('text=Jump to Start in My link typebot 2') 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.click('input[value="My link typebot 2"]', { clickCount: 3 })
await page.press('input[value="My link typebot 2"]', 'Backspace') await page.press('input[value="My link typebot 2"]', 'Backspace')
await page.click('button >> text=My link typebot 1') await page.click('button >> text=My link typebot 1')