From 91fc475aac25b1a3019f9da889f623e7b1e56111 Mon Sep 17 00:00:00 2001
From: Antonella Sgarlatta <antonella@standardnotes.org>
Date: Wed, 16 Jun 2021 12:54:39 -0300
Subject: [PATCH] fix: show autocomplete tag results only if query isn't empty

---
 .../components/AutocompleteTagInput.tsx          | 16 +++++++++-------
 .../ui_models/app_state/note_tags_state.ts       |  2 +-
 2 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/app/assets/javascripts/components/AutocompleteTagInput.tsx b/app/assets/javascripts/components/AutocompleteTagInput.tsx
index 41b77280d..2dddf3077 100644
--- a/app/assets/javascripts/components/AutocompleteTagInput.tsx
+++ b/app/assets/javascripts/components/AutocompleteTagInput.tsx
@@ -5,6 +5,7 @@ import { AppState } from '@/ui_models/app_state';
 import { AutocompleteTagResult } from './AutocompleteTagResult';
 import { AutocompleteTagHint } from './AutocompleteTagHint';
 import { observer } from 'mobx-react-lite';
+import { SNTag } from '@standardnotes/snjs';
 
 type Props = {
   appState: AppState;
@@ -41,8 +42,13 @@ export const AutocompleteTagInput = observer(({ appState }: Props) => {
 
   const onSearchQueryChange = (event: Event) => {
     const query = (event.target as HTMLInputElement).value;
-    appState.noteTags.setAutocompleteSearchQuery(query);
-    appState.noteTags.searchActiveNoteAutocompleteTags();
+
+    if (query === '') {
+      appState.noteTags.clearAutocompleteSearch();
+    } else {
+      appState.noteTags.setAutocompleteSearchQuery(query);
+      appState.noteTags.searchActiveNoteAutocompleteTags();
+    }
   };
 
   const onFormSubmit = async (event: Event) => {
@@ -83,10 +89,6 @@ export const AutocompleteTagInput = observer(({ appState }: Props) => {
     appState.noteTags.setAutocompleteInputFocused(false);
   };
 
-  useEffect(() => {
-    appState.noteTags.searchActiveNoteAutocompleteTags();
-  }, [appState.noteTags]);
-
   useEffect(() => {
     if (autocompleteInputFocused) {
       inputRef.current.focus();
@@ -120,7 +122,7 @@ export const AutocompleteTagInput = observer(({ appState }: Props) => {
             onBlur={closeOnBlur}
           >
             <div className="overflow-y-auto">
-              {autocompleteTagResults.map((tagResult) => (
+              {autocompleteTagResults.map((tagResult: SNTag) => (
                 <AutocompleteTagResult
                   key={tagResult.uuid}
                   appState={appState}
diff --git a/app/assets/javascripts/ui_models/app_state/note_tags_state.ts b/app/assets/javascripts/ui_models/app_state/note_tags_state.ts
index 80b5273f8..3f46a0781 100644
--- a/app/assets/javascripts/ui_models/app_state/note_tags_state.ts
+++ b/app/assets/javascripts/ui_models/app_state/note_tags_state.ts
@@ -98,7 +98,7 @@ export class NoteTagsState {
 
   clearAutocompleteSearch(): void {
     this.setAutocompleteSearchQuery('');
-    this.searchActiveNoteAutocompleteTags();
+    this.setAutocompleteTagResults([]);
   }
 
   async createAndAddNewTag(): Promise<void> {