From 2c86958bf295bef1d4653ccf89ce0c7eea53d5df Mon Sep 17 00:00:00 2001
From: Antonella Sgarlatta <antonella@standardnotes.org>
Date: Wed, 26 May 2021 19:04:12 -0300
Subject: [PATCH] fix: make hint visible and focus input after creating new tag

---
 .../javascripts/components/AutocompleteTagInput.tsx  | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/app/assets/javascripts/components/AutocompleteTagInput.tsx b/app/assets/javascripts/components/AutocompleteTagInput.tsx
index 03b84f232..94061fe3e 100644
--- a/app/assets/javascripts/components/AutocompleteTagInput.tsx
+++ b/app/assets/javascripts/components/AutocompleteTagInput.tsx
@@ -1,7 +1,7 @@
 import { WebApplication } from '@/ui_models/application';
 import { SNTag } from '@standardnotes/snjs';
 import { FunctionalComponent, RefObject } from 'preact';
-import { useRef, useState } from 'preact/hooks';
+import { useEffect, useRef, useState } from 'preact/hooks';
 import { Icon } from './Icon';
 import { Disclosure, DisclosurePanel } from '@reach/disclosure';
 import { useCloseOnBlur } from './utils';
@@ -55,9 +55,7 @@ export const AutocompleteTagInput: FunctionalComponent<Props> = ({
 
   const onSearchQueryChange = (event: Event) => {
     const query = (event.target as HTMLInputElement).value;
-    const tags = getActiveNoteTagResults(query);
-    setTagResults(tags);
-    setHintVisible(query !== '' && !tags.some((tag) => tag.title === query));
+    setTagResults(getActiveNoteTagResults(query));
     setSearchQuery(query);
   };
 
@@ -73,6 +71,7 @@ export const AutocompleteTagInput: FunctionalComponent<Props> = ({
     const newTag = await application.findOrCreateTag(searchQuery);
     await appState.notes.addTagToActiveNote(newTag);
     clearResults();
+    inputRef.current.focus();
   };
 
   const onTagHintClick = async () => {
@@ -84,6 +83,10 @@ export const AutocompleteTagInput: FunctionalComponent<Props> = ({
     await createAndAddNewTag();
   };
 
+  useEffect(() => {
+    setHintVisible(searchQuery !== '' && !tagResults.some((tag) => tag.title === searchQuery));
+  }, [tagResults, searchQuery]);
+
   return (
     <form onSubmit={onFormSubmit} className="mt-2">
       <Disclosure open={dropdownVisible} onChange={showDropdown}>
@@ -142,6 +145,7 @@ export const AutocompleteTagInput: FunctionalComponent<Props> = ({
                   <div className="h-1px my-2 bg-border"></div>
                 )}
                 <button
+                  type="button"
                   className="sn-dropdown-item"
                   onClick={onTagHintClick}
                   onBlur={closeOnBlur}