From 733e14cb58ab527568c7d11ca28fba4c6b3d5b7f Mon Sep 17 00:00:00 2001
From: Jaret Burkett <jaretburkett@gmail.com>
Date: Wed, 1 Jul 2026 13:57:56 -0600
Subject: [PATCH] Fix issue where the window would scroll to and hilight custom
 items in the select box

---
 ui/src/components/formInputs.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/ui/src/components/formInputs.tsx b/ui/src/components/formInputs.tsx
index a7d08f10..cd97e95b 100644
--- a/ui/src/components/formInputs.tsx
+++ b/ui/src/components/formInputs.tsx
@@ -326,6 +326,7 @@ export const CreatableSelectInput = (props: CreatableSelectInputProps) => {
   }
 
   const [isCustom, setIsCustom] = React.useState(!isInOptions && !!value);
+  const customInputRef = React.useRef<HTMLInputElement>(null);
 
   // Build select options with "Custom" at the top
   const customOption: SelectOption = { value: CUSTOM_SELECT_VALUE, label: 'Custom' };
@@ -386,6 +387,8 @@ export const CreatableSelectInput = (props: CreatableSelectInputProps) => {
                 if (val === CUSTOM_SELECT_VALUE) {
                   setIsCustom(true);
                   onChange('');
+                  // focus the custom input only when the user actively selects "Custom"
+                  requestAnimationFrame(() => customInputRef.current?.focus());
                 } else {
                   setIsCustom(false);
                   onChange(val);
@@ -396,13 +399,13 @@ export const CreatableSelectInput = (props: CreatableSelectInputProps) => {
         </div>
         {isCustom && (
           <input
+            ref={customInputRef}
             type="text"
             value={value}
             onChange={e => onChange(e.target.value)}
             className={`${inputClasses} flex-1 min-w-0`}
             placeholder={props.placeholder ?? 'Enter custom value'}
             disabled={props.disabled}
-            autoFocus
           />
         )}
       </div>