fix: make hint visible and focus input after creating new tag
This commit is contained in:
@@ -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}
|
||||||
|
|||||||
Reference in New Issue
Block a user