fix PosePicker portal for Chakra UI Next

Oh oops, Chakra UI Next deprecates usePortal for the popover, so it wasn't escaping properly! Add a Portal component to let it escape the top area again!
This commit is contained in:
Emi Matchu 2020-07-31 23:31:51 -07:00
parent 7f8401ff4b
commit 4aece9d703

View file

@ -10,6 +10,7 @@ import {
PopoverArrow, PopoverArrow,
PopoverContent, PopoverContent,
PopoverTrigger, PopoverTrigger,
Portal,
VisuallyHidden, VisuallyHidden,
useTheme, useTheme,
} from "@chakra-ui/core"; } from "@chakra-ui/core";
@ -62,7 +63,6 @@ function PosePicker({
return ( return (
<Popover <Popover
placement="bottom-end" placement="bottom-end"
usePortal
returnFocusOnClose returnFocusOnClose
onOpen={onLockFocus} onOpen={onLockFocus}
onClose={onUnlockFocus} onClose={onUnlockFocus}
@ -109,6 +109,7 @@ function PosePicker({
)} )}
</Button> </Button>
</PopoverTrigger> </PopoverTrigger>
<Portal>
<PopoverContent> <PopoverContent>
<Box p="4"> <Box p="4">
<table width="100%"> <table width="100%">
@ -196,6 +197,7 @@ function PosePicker({
</Box> </Box>
<PopoverArrow /> <PopoverArrow />
</PopoverContent> </PopoverContent>
</Portal>
</> </>
)} )}
</Popover> </Popover>