From bf1fba91dc9a3ee47ab1ef29704e91674e04cace Mon Sep 17 00:00:00 2001
From: Antonella Sgarlatta <antonella@standardnotes.org>
Date: Mon, 31 May 2021 19:47:21 -0300
Subject: [PATCH] feat: clicking on tag sets it as active

---
 app/assets/javascripts/components/NoteTags.tsx | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/app/assets/javascripts/components/NoteTags.tsx b/app/assets/javascripts/components/NoteTags.tsx
index 6a071eb5d67..259835ca226 100644
--- a/app/assets/javascripts/components/NoteTags.tsx
+++ b/app/assets/javascripts/components/NoteTags.tsx
@@ -51,6 +51,13 @@ const NoteTags = observer(({ application, appState }: Props) => {
     }
   };
 
+  const onTagClick = (clickedTag: SNTag) => {
+    const tagIndex = tags.findIndex(tag => tag.uuid === clickedTag.uuid);
+    if (tagsRef.current[tagIndex] === document.activeElement) {
+      appState.setSelectedTag(clickedTag);
+    }
+  };
+
   const isTagOverflowed = useCallback(
     (tagElement?: HTMLButtonElement): boolean | undefined => {
       if (!tagElement) {
@@ -99,8 +106,8 @@ const NoteTags = observer(({ application, appState }: Props) => {
     appState.activeNote.setOverflowedTagsCount(count);
   }, [appState.activeNote, isTagOverflowed]);
 
-  const setTagsContainerExpanded = (expanded: boolean) => {
-    appState.activeNote.setTagsContainerExpanded(expanded);
+  const expandTags = () => {
+    appState.activeNote.setTagsContainerExpanded(true);
   };
 
   useEffect(() => {
@@ -144,6 +151,7 @@ const NoteTags = observer(({ application, appState }: Props) => {
                 tagsRef.current[index] = element;
               }
             }}
+            onClick={() => onTagClick(tag)}
             onKeyUp={(event) => {
               if (event.key === 'Backspace') {
                 onTagBackspacePress(tag);
@@ -173,9 +181,7 @@ const NoteTags = observer(({ application, appState }: Props) => {
           type="button"
           className={`${tagClass} pl-2 absolute`}
           style={{ left: overflowCountPosition }}
-          onClick={() => {
-            setTagsContainerExpanded(true);
-          }}
+          onClick={expandTags}
         >
           +{overflowedTagsCount}
         </button>