fix: make hint visible and focus input after creating new tag

This commit is contained in:
Antonella Sgarlatta
2021-05-26 19:04:12 -03:00
parent 68bbcc6820
commit 2c86958bf2

View File

@@ -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}