From e3ea0aaafcc517a48ee6ca5eff9e38773f0cdd83 Mon Sep 17 00:00:00 2001
From: Antonella Sgarlatta <antonella@standardnotes.org>
Date: Tue, 25 May 2021 17:31:36 -0300
Subject: [PATCH] feat: create and add tag on click enter

---
 .../components/AutocompleteTagInput.tsx       | 24 +++++++++++++++----
 1 file changed, 19 insertions(+), 5 deletions(-)

diff --git a/app/assets/javascripts/components/AutocompleteTagInput.tsx b/app/assets/javascripts/components/AutocompleteTagInput.tsx
index 3a107af74..8f8190f4e 100644
--- a/app/assets/javascripts/components/AutocompleteTagInput.tsx
+++ b/app/assets/javascripts/components/AutocompleteTagInput.tsx
@@ -33,10 +33,15 @@ export const AutocompleteTagInput: FunctionalComponent<Props> = ({
 
   const inputRef = useRef<HTMLInputElement>();
   const dropdownRef = useRef<HTMLDivElement>();
-  const [closeOnBlur, setLockCloseOnBlur] = useCloseOnBlur(dropdownRef, (visible: boolean) => {
-    setDropdownVisible(visible);
+
+  const clearResults = () => {
     setSearchQuery('');
     setTagResults(getActiveNoteTagResults(''));
+  };
+
+  const [closeOnBlur, setLockCloseOnBlur] = useCloseOnBlur(dropdownRef, (visible: boolean) => {
+    setDropdownVisible(visible);
+    clearResults();
   });
 
   const showDropdown = () => {
@@ -59,14 +64,23 @@ export const AutocompleteTagInput: FunctionalComponent<Props> = ({
     setLockCloseOnBlur(false);
   };
 
-  const onTagHintClick = async () => {
+  const createAndAddNewTag = async () => {
     const newTag = await application.findOrCreateTag(searchQuery);
     await appState.notes.addTagToActiveNote(newTag);
-    setSearchQuery('');
+    clearResults();
+  };
+
+  const onTagHintClick = async () => {
+    await createAndAddNewTag();
+  };
+
+  const onFormSubmit = async (event: Event) => {
+    event.preventDefault();
+    await createAndAddNewTag();
   };
 
   return (
-    <form onSubmit={(event) => event.preventDefault()} className="mt-2">
+    <form onSubmit={onFormSubmit} className="mt-2">
       <Disclosure open={dropdownVisible} onChange={showDropdown}>
         <input
           ref={inputRef}