From e1dfd29dbad154fbd59addbcd8a8656cce8aedc9 Mon Sep 17 00:00:00 2001
From: Aman Harwara <amanharwara@protonmail.com>
Date: Tue, 24 Oct 2023 21:11:33 +0530
Subject: [PATCH] chore: fix tag context menu [skip e2e]

---
 .../Components/Tags/TagContextMenu.tsx        | 52 ++++++++++---------
 .../Components/Tags/TagsListItem.tsx          |  4 ++
 2 files changed, 31 insertions(+), 25 deletions(-)

diff --git a/packages/web/src/javascripts/Components/Tags/TagContextMenu.tsx b/packages/web/src/javascripts/Components/Tags/TagContextMenu.tsx
index d36d243fb..d8023c05b 100644
--- a/packages/web/src/javascripts/Components/Tags/TagContextMenu.tsx
+++ b/packages/web/src/javascripts/Components/Tags/TagContextMenu.tsx
@@ -13,6 +13,7 @@ import Popover from '../Popover/Popover'
 import IconPicker from '../Icon/IconPicker'
 import AddToVaultMenuOption from '../Vaults/AddToVaultMenuOption'
 import { useApplication } from '../ApplicationProvider'
+import MenuSection from '../Menu/MenuSection'
 
 type ContextMenuProps = {
   navigationController: NavigationController
@@ -80,31 +81,32 @@ const TagContextMenu = ({ navigationController, isEntitledToFolders, selectedTag
           useIconGrid={true}
           iconGridClassName="max-h-30"
         />
-        <HorizontalSeparator classes="my-2" />
-        {application.featuresController.isVaultsEnabled() && (
-          <AddToVaultMenuOption iconClassName="mr-2 text-neutral" items={[selectedTag]} />
-        )}
-        <MenuItem className={'justify-between py-1.5'} onClick={onClickStar}>
-          <div className="flex items-center">
-            <Icon type="star" className="mr-2 text-neutral" />
-            {selectedTag.starred ? 'Unfavorite' : 'Favorite'}
-          </div>
-        </MenuItem>
-        <MenuItem className={'justify-between py-1.5'} onClick={onClickAddSubtag}>
-          <div className="flex items-center">
-            <Icon type="add" className="mr-2 text-neutral" />
-            Add subtag
-          </div>
-          {!isEntitledToFolders && <Icon type={PremiumFeatureIconName} className={PremiumFeatureIconClass} />}
-        </MenuItem>
-        <MenuItem className={'py-1.5'} onClick={onClickRename}>
-          <Icon type="pencil-filled" className="mr-2 text-neutral" />
-          Rename
-        </MenuItem>
-        <MenuItem className={'py-1.5'} onClick={onClickDelete}>
-          <Icon type="trash" className="mr-2 text-danger" />
-          <span className="text-danger">Delete</span>
-        </MenuItem>
+        <MenuSection>
+          {application.featuresController.isVaultsEnabled() && (
+            <AddToVaultMenuOption iconClassName="mr-2 text-neutral" items={[selectedTag]} />
+          )}
+          <MenuItem className={'justify-between py-1.5'} onClick={onClickStar}>
+            <div className="flex items-center">
+              <Icon type="star" className="mr-2 text-neutral" />
+              {selectedTag.starred ? 'Unfavorite' : 'Favorite'}
+            </div>
+          </MenuItem>
+          <MenuItem className={'justify-between py-1.5'} onClick={onClickAddSubtag}>
+            <div className="flex items-center">
+              <Icon type="add" className="mr-2 text-neutral" />
+              Add subtag
+            </div>
+            {!isEntitledToFolders && <Icon type={PremiumFeatureIconName} className={PremiumFeatureIconClass} />}
+          </MenuItem>
+          <MenuItem className={'py-1.5'} onClick={onClickRename}>
+            <Icon type="pencil-filled" className="mr-2 text-neutral" />
+            Rename
+          </MenuItem>
+          <MenuItem className={'py-1.5'} onClick={onClickDelete}>
+            <Icon type="trash" className="mr-2 text-danger" />
+            <span className="text-danger">Delete</span>
+          </MenuItem>
+        </MenuSection>
       </Menu>
       <HorizontalSeparator classes="my-2" />
       <div className="px-3 pb-1.5 pt-1 text-sm font-medium text-neutral lg:text-xs">
diff --git a/packages/web/src/javascripts/Components/Tags/TagsListItem.tsx b/packages/web/src/javascripts/Components/Tags/TagsListItem.tsx
index 5c7024c31..f1c596ac6 100644
--- a/packages/web/src/javascripts/Components/Tags/TagsListItem.tsx
+++ b/packages/web/src/javascripts/Components/Tags/TagsListItem.tsx
@@ -323,6 +323,10 @@ export const TagsListItem: FunctionComponent<Props> = observer(
                   role="button"
                   className={'mr-2 cursor-pointer border-0 bg-transparent hover:bg-contrast focus:shadow-inner'}
                   onClick={toggleContextMenu}
+                  onMouseDown={(e) => {
+                    e.stopPropagation()
+                    e.preventDefault()
+                  }}
                   ref={menuButtonRef}
                 >
                   <Icon type="more" className="text-neutral" />