feat(tag-input: add outside click handler to close tag popover on cli…

…cks outside the tag input
JaleelB · Jun 23, 2024 · feae754 · feae754
1 parent 9674ab8
commit feae754
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 6 deletions.
diff --git a/.changeset/rich-buttons-cry.md b/.changeset/rich-buttons-cry.md
@@ -0,0 +1,7 @@
+---
+'emblor': patch
+---
+
+🐞 Bug Fixes:
+
+Restored Default Outside Click Behavior for TagPopover: Updated the TagPopover component to close when clicking outside its bounds, restoring the default behavior that was unintentionally overridden in previous updates. This issue arose due to modifications intended to keep the popover open under specific circumstances, such as focusing within the popover's content. The fix involved adjusting event handling to ensure that the popover's native functionality provided by Radix UI is preserved, allowing it to close as expected when focus is lost or an outside click is detected.
diff --git a/packages/emblor/src/tag/autocomplete.tsx b/packages/emblor/src/tag/autocomplete.tsx
@@ -29,6 +29,7 @@ export const Autocomplete: React.FC<AutocompleteProps> = ({
   const triggerContainerRef = useRef<HTMLDivElement | null>(null);
   const triggerRef = useRef<HTMLButtonElement | null>(null);
   const inputRef = useRef<HTMLInputElement | null>(null);
+  const popoverContentRef = useRef<HTMLDivElement | null>(null);
 
   const [popoverWidth, setPopoverWidth] = useState<number>(0);
   const [isPopoverOpen, setIsPopoverOpen] = useState(false);
@@ -43,6 +44,26 @@ export const Autocomplete: React.FC<AutocompleteProps> = ({
     );
   }, [tags]);
 
+  // Close the popover when clicking outside of it
+  useEffect(() => {
+    const handleOutsideClick = (event) => {
+      if (
+        isPopoverOpen &&
+        triggerContainerRef.current &&
+        !triggerContainerRef.current.contains(event.target) &&
+        !popoverContentRef.current.contains(event.target)
+      ) {
+        setIsPopoverOpen(false);
+      }
+    };
+
+    document.addEventListener('mousedown', handleOutsideClick);
+
+    return () => {
+      document.removeEventListener('mousedown', handleOutsideClick);
+    };
+  }, [isPopoverOpen]);
+
   const handleOpenChange = useCallback(
     (open: boolean) => {
       if (open && triggerContainerRef.current) {
@@ -135,9 +156,9 @@ export const Autocomplete: React.FC<AutocompleteProps> = ({
                 viewBox="0 0 24 24"
                 fill="none"
                 stroke="currentColor"
-                stroke-width="2"
-                stroke-linecap="round"
-                stroke-linejoin="round"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
                 className="lucide lucide-chevron-down h-4 w-4 shrink-0 opacity-50"
               >
                 <path d="m6 9 6 6 6-6"></path>
@@ -146,6 +167,7 @@ export const Autocomplete: React.FC<AutocompleteProps> = ({
           </PopoverTrigger>
         </div>
         <PopoverContent
+          ref={popoverContentRef}
           side="bottom"
           align="start"
           className={cn(`p-0 relative`)}

diff --git a/packages/emblor/src/tag/tag-popover.tsx b/packages/emblor/src/tag/tag-popover.tsx
@@ -22,6 +22,7 @@ export const TagPopover: React.FC<TagPopoverProps> = ({
 }) => {
   const triggerContainerRef = useRef<HTMLDivElement | null>(null);
   const triggerRef = useRef<HTMLButtonElement | null>(null);
+  const popoverContentRef = useRef<HTMLDivElement | null>(null);
   const inputRef = useRef<HTMLInputElement | null>(null);
 
   const [popoverWidth, setPopoverWidth] = useState<number>(0);
@@ -43,6 +44,26 @@ export const TagPopover: React.FC<TagPopoverProps> = ({
     return () => window.removeEventListener('resize', handleResize);
   }, [triggerContainerRef, triggerRef]);
 
+  // Close the popover when clicking outside of it
+  useEffect(() => {
+    const handleOutsideClick = (event) => {
+      if (
+        isPopoverOpen &&
+        triggerContainerRef.current &&
+        !triggerContainerRef.current.contains(event.target) &&
+        !popoverContentRef.current.contains(event.target)
+      ) {
+        setIsPopoverOpen(false);
+      }
+    };
+
+    document.addEventListener('mousedown', handleOutsideClick);
+
+    return () => {
+      document.removeEventListener('mousedown', handleOutsideClick);
+    };
+  }, [isPopoverOpen]);
+
   const handleOpenChange = useCallback(
     (open: boolean) => {
       if (open && triggerContainerRef.current) {
@@ -107,9 +128,9 @@ export const TagPopover: React.FC<TagPopoverProps> = ({
               viewBox="0 0 24 24"
               fill="none"
               stroke="currentColor"
-              stroke-width="2"
-              stroke-linecap="round"
-              stroke-linejoin="round"
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
               className="lucide lucide-chevron-down h-4 w-4 shrink-0 opacity-50"
             >
               <path d="m6 9 6 6 6-6"></path>
@@ -118,6 +139,7 @@ export const TagPopover: React.FC<TagPopoverProps> = ({
         </PopoverTrigger>
       </div>
       <PopoverContent
+        ref={popoverContentRef}
         className="w-full space-y-3"
         style={{
           marginLeft: `-${sideOffset}px`,