From afe5ab207fd619b0a16f39ee7a88fde1cfa88669 Mon Sep 17 00:00:00 2001
From: OGBONNA SUNDAY <62995161+OgDev-01@users.noreply.github.com>
Date: Mon, 23 Oct 2023 16:58:25 +0100
Subject: [PATCH] fix: popover display issue of safari (#1962)

---
 .../contributor-highlight-card.tsx            | 30 ++++++++--
 .../HighlightInput/highlight-input-form.tsx   | 59 +++++++++++++------
 2 files changed, 66 insertions(+), 23 deletions(-)

diff --git a/components/molecules/ContributorHighlight/contributor-highlight-card.tsx b/components/molecules/ContributorHighlight/contributor-highlight-card.tsx
index 64c20d3be2..5997971517 100644
--- a/components/molecules/ContributorHighlight/contributor-highlight-card.tsx
+++ b/components/molecules/ContributorHighlight/contributor-highlight-card.tsx
@@ -124,6 +124,8 @@ const ContributorHighlightCard = ({
   const { follow, unFollow, isError } = useFollowUser(
     dropdownOpen && loggedInUser && loggedInUser?.user_metadata.user_name !== user ? user : ""
   );
+  const [popoverOpen, setPopoverOpen] = useState(false);
+  const popoverContentRef = React.useRef<HTMLDivElement>(null);
 
   const [date, setDate] = useState<Date | undefined>(shipped_date ? new Date(shipped_date) : undefined);
 
@@ -167,6 +169,20 @@ const ContributorHighlightCard = ({
     return !matches ? false : true;
   };
 
+  const handleClickOutsidePopoverContent = (e: MouseEvent) => {
+    if (popoverContentRef.current && !popoverContentRef.current.contains(e.target as Node)) {
+      setPopoverOpen(false);
+    }
+  };
+
+  useEffect(() => {
+    // This closes the popover when user clicks outside of it's content
+    document.addEventListener("mousedown", handleClickOutsidePopoverContent);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutsidePopoverContent);
+    };
+  }, [popoverOpen]);
+
   const getEmojiReactors = (reaction_users: string[]) => {
     if (!Array.isArray(reaction_users)) return "";
 
@@ -659,20 +675,26 @@ const ContributorHighlightCard = ({
                   ></Textarea>
                   <div className="flex items-center justify-between py-1 pl-3">
                     <Tooltip direction="top" content="Pick a date">
-                      <Popover>
+                      <Popover open={popoverOpen}>
                         <PopoverTrigger asChild>
-                          <button className="flex items-center gap-2 text-base text-light-slate-9">
+                          <button
+                            onClick={() => setPopoverOpen(!popoverOpen)}
+                            className="flex items-center gap-2 text-base text-light-slate-9"
+                          >
                             <BsCalendar2Event className="text-light-slate-9" />
                             {date && <span className="text-xs">{format(date, "PPP")}</span>}
                           </button>
                         </PopoverTrigger>
-                        <PopoverContent className="w-auto p-0 bg-white pointer-events-auto">
+                        <PopoverContent ref={popoverContentRef} className="w-auto p-0 bg-white pointer-events-auto">
                           <Calendar
                             // block user's from selecting a future date
                             toDate={new Date()}
                             mode="single"
                             selected={date}
-                            onSelect={setDate}
+                            onSelect={(date) => {
+                              setDate(date);
+                              setPopoverOpen(false);
+                            }}
                             className="border rounded-md"
                           />
                         </PopoverContent>
diff --git a/components/molecules/HighlightInput/highlight-input-form.tsx b/components/molecules/HighlightInput/highlight-input-form.tsx
index 8ce75e0692..11410ee5ed 100644
--- a/components/molecules/HighlightInput/highlight-input-form.tsx
+++ b/components/molecules/HighlightInput/highlight-input-form.tsx
@@ -109,6 +109,8 @@ const HighlightInputForm = ({ refreshCallback }: HighlightInputFormProps): JSX.E
   const [errorMsg, setError] = useState("");
   const [highlightSuggestions, setHighlightSuggestions] = useState<any[]>([]);
   const [loadingSuggestions, setLoadingSuggestions] = useState<boolean>(false);
+  const [createPopoverOpen, setCreatePopoverOpen] = useState(false);
+  const popoverContentRef = useRef<HTMLDivElement>(null);
   const generateSummary = useRef(false);
 
   const fetchAllUserHighlights = async (page: number): Promise<DbHighlight[]> => {
@@ -150,6 +152,12 @@ const HighlightInputForm = ({ refreshCallback }: HighlightInputFormProps): JSX.E
     setBodyText(value);
   };
 
+  const handleClickOutsidePopoverContent = (e: MouseEvent) => {
+    if (popoverContentRef.current && !popoverContentRef.current.contains(e.target as Node)) {
+      setCreatePopoverOpen(false);
+    }
+  };
+
   useEffect(() => {
     // disable scroll when form is open
     if (isFormOpenMobile) {
@@ -159,6 +167,14 @@ const HighlightInputForm = ({ refreshCallback }: HighlightInputFormProps): JSX.E
     }
   }, [isFormOpenMobile]);
 
+  useEffect(() => {
+    // This closes the popover when user clicks outside of it's content
+    document.addEventListener("mousedown", handleClickOutsidePopoverContent);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutsidePopoverContent);
+    };
+  }, []);
+
   // get the user's latest pull requests and issues that don't yet have highlights associated with them
   // and suggest them to the user when they are creating a highlight.
   useEffect(() => {
@@ -555,20 +571,29 @@ const HighlightInputForm = ({ refreshCallback }: HighlightInputFormProps): JSX.E
             <div className="flex">
               <div className="flex w-full gap-1 items-center">
                 <Tooltip direction="top" content="Pick a date">
-                  <Popover>
+                  <Popover open={createPopoverOpen}>
                     <PopoverTrigger asChild>
-                      <button className="flex items-center gap-2 p-2 text-base rounded-full text-light-slate-9 bg-light-slate-3">
+                      <button
+                        type="button"
+                        onClick={() => {
+                          setCreatePopoverOpen(true);
+                        }}
+                        className="flex items-center gap-2 p-2 text-base rounded-full z-10 text-light-slate-9 bg-light-slate-3 cursor-pointer"
+                      >
                         <FiCalendar className="text-light-slate-11" />
                         {date && <span className="text-xs">{format(date, "PPP")}</span>}
                       </button>
                     </PopoverTrigger>
-                    <PopoverContent className="w-auto p-0 bg-white pointer-events-auto">
+                    <PopoverContent ref={popoverContentRef} className="w-auto p-0 bg-white pointer-events-auto">
                       <Calendar
                         // block user's from selecting a future date
                         toDate={new Date()}
                         mode="single"
                         selected={date}
-                        onSelect={setDate}
+                        onSelect={(date) => {
+                          setDate(date);
+                          setCreatePopoverOpen(false);
+                        }}
                         className="border rounded-md"
                       />
                     </PopoverContent>
@@ -656,24 +681,20 @@ const HighlightInputForm = ({ refreshCallback }: HighlightInputFormProps): JSX.E
                             <div className="flex w-full gap-2">
                               {suggestion.type === "pull_request" && (
                                 <BiGitMerge
-                                  className={`
-        text-xl
-        ${suggestion.status_reason === "open" ? "text-green-600" : "text-purple-600"}
-        `}
+                                  className={`text-xl${
+                                    suggestion.status_reason === "open" ? "text-green-600" : "text-purple-600"
+                                  }`}
                                 />
                               )}
                               {suggestion.type === "issue" && (
                                 <VscIssues
-                                  className={`
-        text-xl
-        ${
-          suggestion.status === "open"
-            ? "text-green-600"
-            : suggestion.status_reason === "not_planned"
-            ? "text-red-600"
-            : "text-purple-600"
-        }
-      `}
+                                  className={`text-xl${
+                                    suggestion.status === "open"
+                                      ? "text-green-600"
+                                      : suggestion.status_reason === "not_planned"
+                                      ? "text-red-600"
+                                      : "text-purple-600"
+                                  }`}
                                 />
                               )}
                               <p
@@ -818,7 +839,7 @@ const HighlightInputForm = ({ refreshCallback }: HighlightInputFormProps): JSX.E
                         <FiCalendar className="text-light-slate-11" />
                       </button>
                     </PopoverTrigger>
-                    <PopoverContent className="w-auto p-0 bg-white">
+                    <PopoverContent ref={popoverContentRef} className="w-auto p-0 bg-white">
                       <Calendar
                         // block user's from selecting a future date
                         toDate={new Date()}