From bdc9dcb1205d8df4dbba0973bd0c24412be9df7f Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Tue, 6 Feb 2024 21:38:06 -0600
Subject: [PATCH] Outline tag control when children have focus

---
 src/components/TagInput.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/TagInput.tsx b/src/components/TagInput.tsx
index 5eacb072..af2e82e5 100644
--- a/src/components/TagInput.tsx
+++ b/src/components/TagInput.tsx
@@ -186,7 +186,7 @@ export default function TagInput({
   return (
     <div
       ref={containerRef}
-      className="flex flex-col w-full"
+      className="flex flex-col w-full group"
       onFocus={() => setShouldShowMenu(true)}
       onBlur={e => {
         if (!e.currentTarget.contains(e.relatedTarget)) {
@@ -197,6 +197,7 @@ export default function TagInput({
       <div className={clsx(
         className,
         'w-full control !px-2 !py-2',
+        'group-focus-within:outline outline-1 outline-blue-600',
         'inline-flex flex-wrap items-center gap-2',
         readOnly && 'cursor-not-allowed',
         readOnly && 'bg-gray-100 dark:bg-gray-900 dark:text-gray-400',