fix: dropdown flickery on single highlight card (#2040)

open-sauced · Nov 2, 2023 · 672ce2f · 672ce2f
1 parent 0684081
commit 672ce2f
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 17 deletions.
diff --git a/components/molecules/ContributorHighlight/contributor-highlight-card.tsx b/components/molecules/ContributorHighlight/contributor-highlight-card.tsx
@@ -122,10 +122,11 @@ const ContributorHighlightCard = ({
   const [host, setHost] = useState("");
   const [dropdownOpen, setDropdownOpen] = useState(false);
   const { follow, unFollow, isError } = useFollowUser(
-    dropdownOpen && loggedInUser && loggedInUser?.user_metadata.user_name !== user ? user : ""
+    dropdownOpen && loggedInUser?.user_metadata.user_name !== user ? user : ""
   );
   const [popoverOpen, setPopoverOpen] = useState(false);
   const popoverContentRef = React.useRef<HTMLDivElement>(null);
+  const dropdownRef = React.useRef<HTMLDivElement>(null);
 
   const [date, setDate] = useState<Date | undefined>(shipped_date ? new Date(shipped_date) : undefined);
 
@@ -175,6 +176,12 @@ const ContributorHighlightCard = ({
     }
   };
 
+  const handleClickOutsideDropdownContent = (e: MouseEvent) => {
+    if (dropdownRef.current && !dropdownRef.current.contains(e.target as Node)) {
+      setDropdownOpen(false);
+    }
+  };
+
   useEffect(() => {
     // This closes the popover when user clicks outside of it's content
     document.addEventListener("mousedown", handleClickOutsidePopoverContent);
@@ -183,6 +190,14 @@ const ContributorHighlightCard = ({
     };
   }, [popoverOpen]);
 
+  useEffect(() => {
+    // This closes the popover when user clicks outside of it's content
+    document.addEventListener("mousedown", handleClickOutsideDropdownContent);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutsideDropdownContent);
+    };
+  }, [dropdownOpen]);
+
   const getEmojiReactors = (reaction_users: string[]) => {
     if (!Array.isArray(reaction_users)) return "";
 
@@ -448,6 +463,7 @@ const ContributorHighlightCard = ({
     if (!taggedRepoSearchTerm) return;
     updateSuggestionsDebounced();
   }, [taggedRepoSearchTerm]);
+
   useEffect(() => {
     if (window !== undefined) {
       setHost(window.location.origin as string);
@@ -461,13 +477,7 @@ const ContributorHighlightCard = ({
           {icon}
           <span className="text-sm text-light-slate-11">{getHighlightTypePreset(type).text}</span>
           <div className="flex items-center gap-3 ml-auto lg:gap-3">
-            <DropdownMenu
-              open={dropdownOpen}
-              onOpenChange={(value) => {
-                setDropdownOpen(value);
-              }}
-              modal={false}
-            >
+            <DropdownMenu open={dropdownOpen} modal={false}>
               <div className="flex items-center gap-3 w-max">
                 <Tooltip direction="top" content="share on twitter">
                   <a
@@ -482,12 +492,15 @@ const ContributorHighlightCard = ({
                     <FaXTwitter className="text-lg text-light-orange-9 md:text-xl" />
                   </a>
                 </Tooltip>
-                <DropdownMenuTrigger className="py-2 px-2 rounded-full data-[state=open]:bg-light-slate-7">
+                <DropdownMenuTrigger
+                  onClick={() => setDropdownOpen(!dropdownOpen)}
+                  className="py-2 px-2 rounded-full data-[state=open]:bg-light-slate-7"
+                >
                   <TfiMoreAlt className={"fill-light-slate-11"} size={24} />
                 </DropdownMenuTrigger>
               </div>
 
-              <DropdownMenuContent align="end" className="flex flex-col gap-1 py-2 rounded-lg">
+              <DropdownMenuContent ref={dropdownRef} align="end" className="flex flex-col gap-1 py-2 rounded-lg">
                 <DropdownMenuItem className="rounded-md">
                   <a
                     onClick={() => {
@@ -502,7 +515,13 @@ const ContributorHighlightCard = ({
                     <span>Share to Linkedin</span>
                   </a>
                 </DropdownMenuItem>
-                <DropdownMenuItem onClick={() => handleCopyToClipboard(`${host}/feed/${id}`)} className="rounded-md">
+                <DropdownMenuItem
+                  onClick={() => {
+                    handleCopyToClipboard(`${host}/feed/${id}`);
+                    setDropdownOpen(false);
+                  }}
+                  className="rounded-md"
+                >
                   <div className="flex gap-2.5 py-1 items-center pl-3 pr-7 cursor-pointer">
                     <BsLink45Deg size={22} />
                     <span>Copy link</span>
@@ -540,7 +559,10 @@ const ContributorHighlightCard = ({
                     }`}
                   >
                     <button
-                      onClick={() => setOpenEdit(true)}
+                      onClick={() => {
+                        setOpenEdit(true);
+                        setDropdownOpen(false);
+                      }}
                       className="flex w-full cursor-default gap-2.5 py-1  items-center pl-3 pr-7"
                     >
                       <FiEdit size={22} />

diff --git a/stories/atoms/toggle-switch.stories.tsx b/stories/atoms/toggle-switch.stories.tsx
@@ -1,13 +1,13 @@
-import { ComponentStory } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 import ToggleSwitch from "components/atoms/ToggleSwitch/toggle-switch";
 
-const storyConfig = {
+const storyMeta = {
   title: "Design System/Atoms/ToggleSwitch",
-};
+} as Meta<typeof ToggleSwitch>;
 
-export default storyConfig;
+export default storyMeta;
 
-const ToggleSwitchTemplate: ComponentStory<typeof ToggleSwitch> = (args) => <ToggleSwitch {...args} />;
+const ToggleSwitchTemplate: StoryFn<typeof ToggleSwitch> = (args) => <ToggleSwitch {...args} />;
 export const Default = ToggleSwitchTemplate.bind({});
 export const Small = ToggleSwitchTemplate.bind({});
 export const Large = ToggleSwitchTemplate.bind({});