From edb1de29c9742d0a4939deba5258a92cf4910ab6 Mon Sep 17 00:00:00 2001
From: Negar <nasirinegar13@gmail.com>
Date: Thu, 21 Sep 2023 22:26:54 +0100
Subject: [PATCH] added  useDetectionOutside for bookmark

---
 .../components/ToolBar/AddressBar/BookmarkButton.tsx | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/desktop-app/src/renderer/components/ToolBar/AddressBar/BookmarkButton.tsx b/desktop-app/src/renderer/components/ToolBar/AddressBar/BookmarkButton.tsx
index 0c41de63..42643ee3 100644
--- a/desktop-app/src/renderer/components/ToolBar/AddressBar/BookmarkButton.tsx
+++ b/desktop-app/src/renderer/components/ToolBar/AddressBar/BookmarkButton.tsx
@@ -1,8 +1,10 @@
 import { Icon } from '@iconify/react';
 import { useState, useMemo } from 'react';
+import { useDetectClickOutside } from 'react-detect-click-outside';
 import { useDispatch, useSelector } from 'react-redux';
 import cx from 'classnames';
 import Button from 'renderer/components/Button';
+
 import {
   IBookmarks,
   addBookmark,
@@ -21,6 +23,12 @@ interface Props {
 const BookmarkButton = ({ currentAddress, pageTitle }: Props) => {
   const [openFlyout, setOpenFlyout] = useState<boolean>(false);
   const dispatch = useDispatch();
+  const ref = useDetectClickOutside({
+    onTriggered: () => {
+      if (!openFlyout) return;
+      if (openFlyout) setOpenFlyout(false);
+    },
+  });
 
   const initbookmark = {
     id: '',
@@ -48,7 +56,7 @@ const BookmarkButton = ({ currentAddress, pageTitle }: Props) => {
   useKeyboardShortcut(SHORTCUT_CHANNEL.BOOKMARK, handleKeyboardShortcut);
 
   return (
-    <>
+    <div ref={ref}>
       <div>
         <Button
           className={cx('rounded-full', {
@@ -71,7 +79,7 @@ const BookmarkButton = ({ currentAddress, pageTitle }: Props) => {
           />
         )}
       </div>
-    </>
+    </div>
   );
 };