From c67bc3e080e77df0681c6e59c6150c4546bf50dd Mon Sep 17 00:00:00 2001
From: ayeshoali <ayeshoali@gmail.com>
Date: Thu, 26 Jan 2023 15:44:10 +0500
Subject: [PATCH] fix: fixed blur event for actions dropdown

---
 src/discussions/common/HoverCard.jsx |  7 +++----
 src/discussions/posts/post/Post.jsx  | 10 +++++++---
 src/index.scss                       |  4 ++--
 3 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/src/discussions/common/HoverCard.jsx b/src/discussions/common/HoverCard.jsx
index b06f4911..bea86d6c 100644
--- a/src/discussions/common/HoverCard.jsx
+++ b/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>
diff --git a/src/discussions/posts/post/Post.jsx b/src/discussions/posts/post/Post.jsx
index 76609eb2..e48e4fe0 100644
--- a/src/discussions/posts/post/Post.jsx
+++ b/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}
diff --git a/src/index.scss b/src/index.scss
index 61e8a444..d1880575 100755
--- a/src/index.scss
+++ b/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;
 }