#103

frontend/src/components/PostFormTagsArea.tsx

@@ -38,6 +38,7 @@ export default (({ tags, setTags }: Props) => {
   const ref = useRef<HTMLTextAreaElement> (null)
 
   const [bounds, setBounds] = useState<{ start: number; end: number }> ({ start: 0, end: 0 })
+  const [focused, setFocused] = useState (false)
   const [suggestions, setSuggestions] = useState<Tag[]> ([])
   const [suggestionsVsbl, setSuggestionsVsbl] = useState (false)
 
@@ -70,7 +71,7 @@ export default (({ tags, setTags }: Props) => {
   }
 
   return (
-      <div>
+      <div className="relative w-full">
 	<Label>タグ</Label>
 	<TextArea
 	    ref={ref}
@@ -80,12 +81,19 @@ export default (({ tags, setTags }: Props) => {
 	      const pos = (ev.target as HTMLTextAreaElement).selectionStart
 	      await recompute (pos)
 	    }}
-	    onBlur={() => setSuggestionsVsbl (false)}/>
+	    onFocus={() => {
-	<TagSearchBox
+	      setFocused (true)
-	    suggestions={suggestionsVsbl && suggestions.length > 0
+	    }}
-			 ? suggestions
+	    onBlur={() => {
-			 : [] as Tag[]}
+	      setFocused (false)
-	    activeIndex={-1}
+	      setSuggestionsVsbl (false)
-	    onSelect={handleTagSelect}/>
+	    }}/>
+	{focused && (
+	    <TagSearchBox
+		suggestions={suggestionsVsbl && suggestions.length > 0
+			     ? suggestions
+			     : [] as Tag[]}
+		activeIndex={-1}
+		onSelect={handleTagSelect}/>)}
       </div>)
 }) satisfies FC<Props>

frontend/src/lib/utils.ts

@@ -1,6 +1,7 @@
-import { clsx, type ClassValue } from 'clsx'
+import { clsx } from 'clsx'
 import { twMerge } from 'tailwind-merge'
 
-export function cn (...inputs: ClassValue[]) {
+import type { ClassValue } from 'clsx'
-  return twMerge(clsx(...inputs))
+
-}
+
+export const cn = (...inputs: ClassValue[]) => twMerge (clsx (...inputs))