fix popover bug

ui/marketplace/Rating/Rating.tsx

-import { Text, PopoverTrigger, PopoverBody, PopoverContent, useDisclosure, Skeleton } from '@chakra-ui/react';
+import { Text, PopoverTrigger, PopoverBody, PopoverContent, useDisclosure, Skeleton, useOutsideClick, Box } from '@chakra-ui/react';
 import React from 'react';
 
 import Popover from 'ui/shared/chakra/Popover';
@@ -24,6 +24,9 @@ const Rating = ({
   isSending, isLoading, fullView, canRate,
 }: Props) => {
   const { isOpen, onToggle, onClose } = useDisclosure();
+  // have to implement this solution because popover loses focus on button click inside it (issue: https://github.com/chakra-ui/chakra-ui/issues/7359)
+  const popoverRef = React.useRef(null);
+  useOutsideClick({ ref: popoverRef, handler: onClose });
 
   return (
     <Skeleton
@@ -38,7 +41,8 @@ const Rating = ({
           <Text fontSize="md" ml={ 1 }>{ rating }</Text>
         </>
       ) }
-      <Popover isOpen={ isOpen } onClose={ onClose } placement="bottom" isLazy>
+      <Box ref={ popoverRef }>
+        <Popover isOpen={ isOpen } placement="bottom" isLazy>
           <PopoverTrigger>
             <TriggerButton
               rating={ rating }
@@ -60,6 +64,7 @@ const Rating = ({
             </PopoverBody>
           </PopoverContent>
         </Popover>
+      </Box>
     </Skeleton>
   );
 };