From b57b0bec88738a6e9842e3e1be14022570744c91 Mon Sep 17 00:00:00 2001
From: Erik Jan de Wit <erikjan.dewit@gmail.com>
Date: Fri, 25 Oct 2024 15:26:44 +0200
Subject: [PATCH] focus input on first click (#34283)

fixes: #34054

Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com>
---
 .../src/controls/select-control/TypeaheadSelectControl.tsx | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/js/libs/ui-shared/src/controls/select-control/TypeaheadSelectControl.tsx b/js/libs/ui-shared/src/controls/select-control/TypeaheadSelectControl.tsx
index 12e84a54ae..13e4e4a79f 100644
--- a/js/libs/ui-shared/src/controls/select-control/TypeaheadSelectControl.tsx
+++ b/js/libs/ui-shared/src/controls/select-control/TypeaheadSelectControl.tsx
@@ -160,7 +160,6 @@ export const TypeaheadSelectControl = <
         render={({ field }) => (
           <Select
             {...rest}
-            onClick={() => setOpen(!open)}
             onOpenChange={() => setOpen(false)}
             selected={
               isSelectBasedOptions(options)
@@ -173,12 +172,16 @@ export const TypeaheadSelectControl = <
                     .map((o) => o.value)
                 : field.value
             }
+            shouldFocusFirstItemOnOpen={false}
             toggle={(ref) => (
               <MenuToggle
                 ref={ref}
                 id={id || name.slice(name.lastIndexOf(".") + 1)}
                 variant="typeahead"
-                onClick={() => setOpen(!open)}
+                onClick={() => {
+                  setOpen(!open);
+                  textInputRef.current?.focus();
+                }}
                 isExpanded={open}
                 isFullWidth
                 status={get(errors, name) ? MenuToggleStatus.danger : undefined}