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