From 41867db2a9d427480ef896c72e000cf04ec8968a Mon Sep 17 00:00:00 2001
From: Spencer Murray <spencer.murray@sentry.io>
Date: Thu, 19 Feb 2026 15:09:14 -0500
Subject: [PATCH 1/2] fix scroll as tags in list are focused

---
 frontend/src/components/EditableTags.tsx | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/frontend/src/components/EditableTags.tsx b/frontend/src/components/EditableTags.tsx
index 1e3a86a..5b0142d 100644
--- a/frontend/src/components/EditableTags.tsx
+++ b/frontend/src/components/EditableTags.tsx
@@ -271,6 +271,12 @@ export function EditableTags({
               <div className="p-space-sm max-h-[200px] overflow-y-auto [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
                 {showCreateOption && (
                   <button
+                    ref={
+                      focusedIndex === 0
+                        ? (el: HTMLButtonElement | null) =>
+                            el?.scrollIntoView({block: 'nearest'})
+                        : undefined
+                    }
                     type="button"
                     onClick={handleCreateTag}
                     disabled={isCreating}
@@ -294,6 +300,12 @@ export function EditableTags({
                   const optionIndex = showCreateOption ? index + 1 : index;
                   return (
                     <button
+                      ref={
+                        optionIndex === focusedIndex
+                          ? (el: HTMLButtonElement | null) =>
+                              el?.scrollIntoView({block: 'nearest'})
+                          : undefined
+                      }
                       key={suggestion}
                       type="button"
                       onClick={() => addTag(suggestion)}

From 548a7f515d4f69d5e9d3ce523ab6e3d580990834 Mon Sep 17 00:00:00 2001
From: Spencer Murray <spencer.murray@sentry.io>
Date: Thu, 19 Feb 2026 15:39:49 -0500
Subject: [PATCH 2/2] Tweak approach to prevent unnecessary code execution

---
 frontend/src/components/EditableTags.tsx | 19 +++++++------------
 1 file changed, 7 insertions(+), 12 deletions(-)

diff --git a/frontend/src/components/EditableTags.tsx b/frontend/src/components/EditableTags.tsx
index 5b0142d..18387a2 100644
--- a/frontend/src/components/EditableTags.tsx
+++ b/frontend/src/components/EditableTags.tsx
@@ -37,6 +37,7 @@ export function EditableTags({
   const [isCreating, setIsCreating] = useState(false);
   const [saveError, setSaveError] = useState<string | null>(null);
   const inputRef = useRef<HTMLInputElement>(null);
+  const focusedOptionRef = useRef<HTMLButtonElement>(null);
 
   const resetState = () => {
     setInputValue('');
@@ -182,6 +183,10 @@ export function EditableTags({
     }
   };
 
+  useEffect(() => {
+    focusedOptionRef.current?.scrollIntoView({block: 'nearest'});
+  }, [focusedIndex]);
+
   useEffect(() => {
     if (isEditing && inputRef.current) {
       inputRef.current.focus();
@@ -271,12 +276,7 @@ export function EditableTags({
               <div className="p-space-sm max-h-[200px] overflow-y-auto [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
                 {showCreateOption && (
                   <button
-                    ref={
-                      focusedIndex === 0
-                        ? (el: HTMLButtonElement | null) =>
-                            el?.scrollIntoView({block: 'nearest'})
-                        : undefined
-                    }
+                    ref={focusedIndex === 0 ? focusedOptionRef : undefined}
                     type="button"
                     onClick={handleCreateTag}
                     disabled={isCreating}
@@ -300,12 +300,7 @@ export function EditableTags({
                   const optionIndex = showCreateOption ? index + 1 : index;
                   return (
                     <button
-                      ref={
-                        optionIndex === focusedIndex
-                          ? (el: HTMLButtonElement | null) =>
-                              el?.scrollIntoView({block: 'nearest'})
-                          : undefined
-                      }
+                      ref={optionIndex === focusedIndex ? focusedOptionRef : undefined}
                       key={suggestion}
                       type="button"
                       onClick={() => addTag(suggestion)}