From 4635ea9443a24b0c0483b6df4313802836cbb505 Mon Sep 17 00:00:00 2001
From: Hamza Ali <github+hhhapz@hamza.sh>
Date: Sun, 5 Oct 2025 03:43:17 -0400
Subject: [PATCH] feat(ui/choice field): select old content on click, auto
 select first row (#10485)

closes #10468, #10470
---
 src/frontend/src/components/forms/fields/ChoiceField.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/frontend/src/components/forms/fields/ChoiceField.tsx b/src/frontend/src/components/forms/fields/ChoiceField.tsx
index 7951907321..38258d2d86 100644
--- a/src/frontend/src/components/forms/fields/ChoiceField.tsx
+++ b/src/frontend/src/components/forms/fields/ChoiceField.tsx
@@ -1,7 +1,7 @@
 import type { ApiFormFieldType } from '@lib/types/Forms';
 import { Select } from '@mantine/core';
 import { useId } from '@mantine/hooks';
-import { useCallback, useMemo } from 'react';
+import { useCallback, useMemo, useRef } from 'react';
 import type { FieldValues, UseControllerReturn } from 'react-hook-form';
 
 /**
@@ -17,6 +17,7 @@ export function ChoiceField({
   fieldName: string;
 }>) {
   const fieldId = useId();
+  const inputRef = useRef<HTMLInputElement>(null);
 
   const {
     field,
@@ -70,6 +71,8 @@ export function ChoiceField({
       error={definition.error ?? error?.message}
       radius='sm'
       {...field}
+      ref={inputRef}
+      onDropdownOpen={() => inputRef?.current?.select()}
       onChange={onChange}
       data={choices}
       value={choiceValue}
@@ -81,6 +84,7 @@ export function ChoiceField({
       leftSection={definition.icon}
       comboboxProps={{ withinPortal: true }}
       searchable
+      selectFirstOptionOnChange
     />
   );
 }