feat: show button to remove note on focus

app/assets/javascripts/components/NoteTag.tsx

@@ -3,8 +3,6 @@ import { FunctionalComponent } from 'preact';
 import { useRef, useState } from 'preact/hooks';
 import { AppState } from '@/ui_models/app_state';
 import { SNTag } from '@standardnotes/snjs/dist/@types';
-import { useEffect } from 'react';
-import { useCloseOnBlur, useCloseOnClickOutside } from './utils';
 
 type Props = {
   appState: AppState;
@@ -16,14 +14,8 @@ export const NoteTag: FunctionalComponent<Props> = ({ appState, tag }) => {
     tagsContainerMaxWidth,
   } = appState.activeNote;
 
-  const [contextMenuOpen, setContextMenuOpen] = useState(false);
+  const [showDeleteButton, setShowDeleteButton] = useState(false);
-  const [contextMenuPosition, setContextMenuPosition] = useState({ top: 0, left: 0 });
+  const deleteTagRef = useRef<HTMLButtonElement>();
-
-  const contextMenuRef = useRef<HTMLDivElement>();
-  const tagRef = useRef<HTMLButtonElement>();
-
-  const [closeOnBlur] = useCloseOnBlur(contextMenuRef, setContextMenuOpen);
-  useCloseOnClickOutside(contextMenuRef, setContextMenuOpen);
 
   const deleteTag = () => {
     appState.activeNote.removeTagFromActiveNote(tag);
@@ -33,29 +25,22 @@ export const NoteTag: FunctionalComponent<Props> = ({ appState, tag }) => {
     appState.setSelectedTag(tag);
   };
 
-  const contextMenuListener = (event: MouseEvent) => {
+  const onFocus = () => {
-    event.preventDefault();
+    setShowDeleteButton(true);
-    setContextMenuPosition({
-      top: event.clientY,
-      left: event.clientX,
-    });
-    setContextMenuOpen(true);
   };
 
-  useEffect(() => {
+  const onBlur = (event: FocusEvent) => {
-    tagRef.current.addEventListener('contextmenu', contextMenuListener);
+    const relatedTarget = event.relatedTarget as Node;
-    return () => {
+    if (relatedTarget !== deleteTagRef.current) {
-      tagRef.current.removeEventListener('contextmenu', contextMenuListener);
+      setShowDeleteButton(false);
+    }
   };
-  }, []);
 
   return (
-    <>
     <button
       ref={(element) => {
         if (element) {
           appState.activeNote.setTagElement(tag, element);
-            tagRef.current = element;
         }
       }}
       className="sn-tag pl-1 pr-2 mr-2"
@@ -66,33 +51,28 @@ export const NoteTag: FunctionalComponent<Props> = ({ appState, tag }) => {
           deleteTag();
         }
       }}
-        onBlur={closeOnBlur}
+      onFocus={onFocus}
+      onBlur={onBlur}
     >
-        <Icon type="hashtag" className="sn-icon--small mr-1 color-info" />
+      <Icon type="hashtag" className="sn-icon--small color-neutral mr-1" />
       <span className="whitespace-nowrap overflow-hidden overflow-ellipsis">
         {tag.title}
       </span>
-      </button>
+      {showDeleteButton && (
-      {contextMenuOpen && (
-        <div
-          ref={contextMenuRef}
-          className="sn-dropdown sn-dropdown--small max-h-120 max-w-xs flex flex-col py-2 overflow-y-scroll fixed"
-          style={{
-            ...contextMenuPosition
-          }}
-        >
         <button
+          ref={deleteTagRef}
           type="button"
-            className="sn-dropdown-item"
+          className="ml-2 -mr-1 border-0 p-0 bg-transparent cursor-pointer flex"
+          onFocus={onFocus}
+          onBlur={onBlur}
           onClick={deleteTag}
         >
-            <div className="flex items-center">
+          <Icon
-              <Icon type="close" className="color-danger mr-2" />
+            type="close"
-              <span className="color-danger">Remove tag</span>
+            className="sn-icon--small color-neutral hover:color-info"
-            </div>
+          />
         </button>
-        </div>
       )}
-    </>
+    </button>
   );
 };