fix: fixed blur event for actions dropdown

src/discussions/common/HoverCard.jsx

@@ -33,11 +33,11 @@ function HoverCard({
 
   return (
     <div
-      className="d-flex hover-card mr-n4 position-absolute"
+      className="d-flex flex-fill justify-content-end align-items-center hover-card mr-n4 position-absolute"
       data-testid="hover-card"
     >
       {userCanAddThreadInBlackoutDate && (
-        <div className="actions d-flex">
+        <div className="d-flex">
           <Button
             variant="tertiary"
             className={classNames('px-2.5 py-2 border-0 font-style-normal font-family-inter text-gray-700 font-size-12',
@@ -98,8 +98,7 @@ function HoverCard({
           />
         </div>
       )}
-
-      <div className="hover-button ml-auto d-flex">
+      <div className="hover-button ml-auto">
         <ActionsDropdown commentOrPost={commentOrPost} actionHandlers={actionHandlers} dropDownIconSize />
       </div>
     </div>

src/discussions/posts/post/Post.jsx

@@ -64,6 +64,12 @@ function Post({
     hideReportConfirmation();
   };
 
+  const handleBlurEvent = (e) => {
+    if (!e.currentTarget.contains(e.relatedTarget)) {
+      setShowHoverCard(false);
+    }
+  };
+
   const actionHandlers = {
     [ContentActions.EDIT_CONTENT]: () => history.push({
       ...location,
@@ -96,7 +102,7 @@ function Post({
       onMouseEnter={() => setShowHoverCard(true)}
       onMouseLeave={() => setShowHoverCard(false)}
       onFocus={() => setShowHoverCard(true)}
-      onBlur={() => setShowHoverCard(false)}
+      onBlur={(e) => handleBlurEvent(e)}
     >
       <Confirmation
         isOpen={isDeleting}
@@ -117,7 +123,6 @@ function Post({
           confirmButtonVariant="danger"
         />
       )}
-
       {showHoverCard && (
         <HoverCard
           commentOrPost={post}
@@ -159,7 +164,6 @@ function Post({
           </Hyperlink>
         </div>
       )}
-
       <PostFooter post={post} preview={preview} />
       <ClosePostReasonModal
         isOpen={isClosing}

src/index.scss

@@ -339,7 +339,7 @@ header {
 }
 
 .actions-dropdown {
-  z-index: 0;
+  z-index: 1;
 }
 
 .discussion-topic-group:last-of-type .divider {
@@ -425,7 +425,7 @@ header {
   pointer-events: none;
 }
 
-.on-focus:focus {
+.on-focus:focus-visible {
   outline: 2px solid black;
 }