diff --git a/frontend/src/components/PostFormTagsArea.tsx b/frontend/src/components/PostFormTagsArea.tsx index a047b15..ee45f40 100644 --- a/frontend/src/components/PostFormTagsArea.tsx +++ b/frontend/src/components/PostFormTagsArea.tsx @@ -44,10 +44,10 @@ export default (({ tags, setTags }: Props) => { const handleTagSelect = (tag: Tag) => { setSuggestionsVsbl (false) const textarea = ref.current! - const newValue = replaceToken (tags, bounds.start, bounds.end, tag.name) + const newValue = replaceToken (tags, bounds.start, bounds.end, tag.name + ' ') setTags (newValue) requestAnimationFrame (async () => { - const p = bounds.start + tag.name.length + const p = bounds.start + tag.name.length + 1 textarea.selectionStart = textarea.selectionEnd = p textarea.focus () await recompute (p, newValue) @@ -56,8 +56,15 @@ export default (({ tags, setTags }: Props) => { const recompute = async (pos: number, v: string = tags) => { const { start, end, token } = getTokenAt (v, pos) + if (!(token.trim ())) + { + setSuggestionsVsbl (false) + return + } + setBounds ({ start, end }) - const data = await apiGet ('/tags/autocomplete', { params: { q: token, nico: 0 } }) + + const data = await apiGet ('/tags/autocomplete', { params: { q: token, nico: '0' } }) setSuggestions (data.filter (t => t.postCount > 0)) setSuggestionsVsbl (suggestions.length > 0) } @@ -72,11 +79,13 @@ export default (({ tags, setTags }: Props) => { onSelect={async (ev: SyntheticEvent) => { const pos = (ev.target as HTMLTextAreaElement).selectionStart await recompute (pos) - }}/> - + }} + onBlur={() => setSuggestionsVsbl (false)}/> + 0 + ? suggestions + : [] as Tag[]} + activeIndex={-1} + onSelect={handleTagSelect}/> ) }) satisfies FC