Whenever, I click this profile component; the popover will be trigger. But, I wrap the children of <PopoverTrigger>...code</Popovertrigger> into this <PopoverTrigger><ProfileComponent/></Popovertrigger> Because of this, the popover is not working, I just wrap the children because I want the ProfileComponent is reusable
This is my whole code
Profile Component
interface IProfileProps extends BoxProps { query: boolean; } const Profile = ({ query }: IProfileProps) => { return ( <Box px={query ? "0px" : "5"} w="full" position="absolute" bottom="10"> {" "} <HStack p="10px" borderRadius="full" w="full" h="full" // spacing="20px" cursor="pointer" _hover={{ bg: "rgba(255, 233, 206, 0.45)" }} > <Image m={query ? "auto" : "0"} boxSize="45px" borderRadius="full" alt="user profile" src="" /> <VStack spacing="5px" alignItems="baseline" w="full" h="full" display={{ lg: query ? "none" : "block" }} > <Text fontWeight="bold">Mosh Ontong</Text> <HStack color="green.400"> <Icon as={MdVerifiedUser}></Icon> <Text fontWeight="bold" fontSize="0.8rem"> Verified </Text> </HStack> </VStack> <Icon as={HiDotsVertical} boxSize="20px" display={{ lg: query ? "none" : "block" }} /> </HStack>{" "} </Box> ); }; Then my Profile Popover Component
const DesktopProfile = ({ query }: IProfileProps) => { const initRef = React.useRef<HTMLButtonElement>(null); return ( <Popover placement="right" initialFocusRef={initRef}> {/* //Focus here */} <PopoverTrigger> {/* //So this is my Profile Component, when I click this profile component it failed to trigger the popover */} <Profile query={query} /> </PopoverTrigger> <PopoverContent color="white" bg="blue.800" borderColor="blue.800"> <PopoverHeader pt={4} fontWeight="bold" border="0"> Mosh Ontong </PopoverHeader> <PopoverArrow /> <PopoverCloseButton /> <PopoverBody> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore. </PopoverBody> <PopoverFooter border="0" d="flex" alignItems="center" justifyContent="space-between" pb={4} > <Box fontSize="sm">Step 2 of 4</Box> <ButtonGroup size="sm"> <Button colorScheme="green">Setup Email</Button> <Button colorScheme="blue" ref={initRef}> Next </Button> </ButtonGroup> </PopoverFooter> </PopoverContent> </Popover> ); }; My goal is the popovertrigger tag accept my ProfileComponent as the trigger of Popover
2 Answers
I solved the problem I just wrapped my ProfileComponent
<PopoverTrigger> {/* I wrapped my Profile Component*/} <Box px={query ? "0px" : "5"} w="full" position="absolute" bottom="10"> <Profile query={query}></Profile> </Box> </PopoverTrigger> wrap your component by a Box component or wrap your Profile component by a forwardRef of chakra ui so he can use the Ref of your component
