fix: show autocomplete tag results only if query isn't empty

This commit is contained in:
Antonella Sgarlatta
2021-06-16 12:54:39 -03:00
parent 124f7779c3
commit 91fc475aac
2 changed files with 10 additions and 8 deletions

View File

@@ -5,6 +5,7 @@ import { AppState } from '@/ui_models/app_state';
import { AutocompleteTagResult } from './AutocompleteTagResult'; import { AutocompleteTagResult } from './AutocompleteTagResult';
import { AutocompleteTagHint } from './AutocompleteTagHint'; import { AutocompleteTagHint } from './AutocompleteTagHint';
import { observer } from 'mobx-react-lite'; import { observer } from 'mobx-react-lite';
import { SNTag } from '@standardnotes/snjs';
type Props = { type Props = {
appState: AppState; appState: AppState;
@@ -41,8 +42,13 @@ export const AutocompleteTagInput = observer(({ appState }: Props) => {
const onSearchQueryChange = (event: Event) => { const onSearchQueryChange = (event: Event) => {
const query = (event.target as HTMLInputElement).value; 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) => { const onFormSubmit = async (event: Event) => {
@@ -83,10 +89,6 @@ export const AutocompleteTagInput = observer(({ appState }: Props) => {
appState.noteTags.setAutocompleteInputFocused(false); appState.noteTags.setAutocompleteInputFocused(false);
}; };
useEffect(() => {
appState.noteTags.searchActiveNoteAutocompleteTags();
}, [appState.noteTags]);
useEffect(() => { useEffect(() => {
if (autocompleteInputFocused) { if (autocompleteInputFocused) {
inputRef.current.focus(); inputRef.current.focus();
@@ -120,7 +122,7 @@ export const AutocompleteTagInput = observer(({ appState }: Props) => {
onBlur={closeOnBlur} onBlur={closeOnBlur}
> >
<div className="overflow-y-auto"> <div className="overflow-y-auto">
{autocompleteTagResults.map((tagResult) => ( {autocompleteTagResults.map((tagResult: SNTag) => (
<AutocompleteTagResult <AutocompleteTagResult
key={tagResult.uuid} key={tagResult.uuid}
appState={appState} appState={appState}

View File

@@ -98,7 +98,7 @@ export class NoteTagsState {
clearAutocompleteSearch(): void { clearAutocompleteSearch(): void {
this.setAutocompleteSearchQuery(''); this.setAutocompleteSearchQuery('');
this.searchActiveNoteAutocompleteTags(); this.setAutocompleteTagResults([]);
} }
async createAndAddNewTag(): Promise<void> { async createAndAddNewTag(): Promise<void> {