From 4c6bfb8519e5c42175365ff2b829c505a4a5edf7 Mon Sep 17 00:00:00 2001
From: Antonella Sgarlatta <antonella@standardnotes.org>
Date: Tue, 25 May 2021 17:25:57 -0300
Subject: [PATCH] feat: create and add tag to note on hint click

---
 .../javascripts/components/AutocompleteTagInput.tsx   | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/app/assets/javascripts/components/AutocompleteTagInput.tsx b/app/assets/javascripts/components/AutocompleteTagInput.tsx
index 347c49de8..3a107af74 100644
--- a/app/assets/javascripts/components/AutocompleteTagInput.tsx
+++ b/app/assets/javascripts/components/AutocompleteTagInput.tsx
@@ -52,13 +52,19 @@ export const AutocompleteTagInput: FunctionalComponent<Props> = ({
     setSearchQuery(query);
   };
 
-  const onOptionClick = async (tag: SNTag) => {
+  const onTagOptionClick = async (tag: SNTag) => {
     setLockCloseOnBlur(true);
     await appState.notes.addTagToActiveNote(tag);
     inputRef.current.focus();
     setLockCloseOnBlur(false);
   };
 
+  const onTagHintClick = async () => {
+    const newTag = await application.findOrCreateTag(searchQuery);
+    await appState.notes.addTagToActiveNote(newTag);
+    setSearchQuery('');
+  };
+
   return (
     <form onSubmit={(event) => event.preventDefault()} className="mt-2">
       <Disclosure open={dropdownVisible} onChange={showDropdown}>
@@ -82,7 +88,7 @@ export const AutocompleteTagInput: FunctionalComponent<Props> = ({
                 <button
                   key={tag.uuid}
                   className="sn-dropdown-item"
-                  onClick={() => onOptionClick(tag)}
+                  onClick={() => onTagOptionClick(tag)}
                   onBlur={closeOnBlur}
                 >
                   <Icon type="hashtag" className="color-neutral mr-2" />
@@ -110,6 +116,7 @@ export const AutocompleteTagInput: FunctionalComponent<Props> = ({
                 )}
                 <button
                   className="sn-dropdown-item"
+                  onClick={onTagHintClick}
                   onBlur={closeOnBlur}
                 >
                   <span>