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:
parent
7f8401ff4b
commit
4aece9d703
1 changed files with 90 additions and 88 deletions
|
@ -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>
|
||||||
|
|
Loading…
Reference in a new issue