From ad81037a778a27d075811fec0854ecf8f28402ae Mon Sep 17 00:00:00 2001
From: miteruzo <miteruzo@naver.com>
Date: Sun, 22 Feb 2026 23:26:49 +0900
Subject: [PATCH] #103

---
 frontend/src/components/PostFormTagsArea.tsx | 24 +++++++++++++-------
 frontend/src/lib/utils.ts                    |  9 ++++----
 2 files changed, 21 insertions(+), 12 deletions(-)

diff --git a/frontend/src/components/PostFormTagsArea.tsx b/frontend/src/components/PostFormTagsArea.tsx
index ee45f40..c7775af 100644
--- a/frontend/src/components/PostFormTagsArea.tsx
+++ b/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)}/>
-	<TagSearchBox
-	    suggestions={suggestionsVsbl && suggestions.length > 0
-			 ? suggestions
-			 : [] as Tag[]}
-	    activeIndex={-1}
-	    onSelect={handleTagSelect}/>
+	    onFocus={() => {
+	      setFocused (true)
+	    }}
+	    onBlur={() => {
+	      setFocused (false)
+	      setSuggestionsVsbl (false)
+	    }}/>
+	{focused && (
+	    <TagSearchBox
+		suggestions={suggestionsVsbl && suggestions.length > 0
+			     ? suggestions
+			     : [] as Tag[]}
+		activeIndex={-1}
+		onSelect={handleTagSelect}/>)}
       </div>)
 }) satisfies FC<Props>
diff --git a/frontend/src/lib/utils.ts b/frontend/src/lib/utils.ts
index 3a281f6..871bdd6 100644
--- a/frontend/src/lib/utils.ts
+++ b/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[]) {
-  return twMerge(clsx(...inputs))
-}
+import type { ClassValue } from 'clsx'
+
+
+export const cn = (...inputs: ClassValue[]) => twMerge (clsx (...inputs))