From 27357d9b2553c9f376f3b1fdfa3d1d14a90df731 Mon Sep 17 00:00:00 2001
From: thomasmorice <82149830+thomasmorice@users.noreply.github.com>
Date: Sat, 12 Nov 2022 20:18:18 +0100
Subject: [PATCH] add focus on search box when opening tokens select modal
 (#998)

---
 packages/web/components/input/search-box.tsx | 2 ++
 packages/web/components/types.ts             | 1 +
 packages/web/modals/token-select.tsx         | 1 +
 3 files changed, 4 insertions(+)

diff --git a/packages/web/components/input/search-box.tsx b/packages/web/components/input/search-box.tsx
index c9dac4c0d8..f305c31250 100644
--- a/packages/web/components/input/search-box.tsx
+++ b/packages/web/components/input/search-box.tsx
@@ -12,6 +12,7 @@ export const SearchBox: FunctionComponent<
   placeholder,
   type,
   disabled = false,
+  autoFocus,
   className,
 }) => {
   const [isFocused, setIsFocused] = useState(false);
@@ -35,6 +36,7 @@ export const SearchBox: FunctionComponent<
           className="w-full h-full appearance-none bg-transparent placeholder:body2 placeholder:text-osmoverse-500 transition-colors"
           value={currentValue}
           type={type}
+          autoFocus={autoFocus}
           placeholder={placeholder}
           autoComplete="off"
           onFocus={(e: any) => {
diff --git a/packages/web/components/types.ts b/packages/web/components/types.ts
index e08b6abd39..86b11f1b53 100644
--- a/packages/web/components/types.ts
+++ b/packages/web/components/types.ts
@@ -14,6 +14,7 @@ export type MainLayoutMenu = {
 export interface InputProps<T> {
   currentValue: T;
   onInput: (value: T) => void;
+  autoFocus?: boolean;
   onFocus?: (e: any) => void;
   placeholder?: T;
 }
diff --git a/packages/web/modals/token-select.tsx b/packages/web/modals/token-select.tsx
index 4e855a802a..cce90c4781 100644
--- a/packages/web/modals/token-select.tsx
+++ b/packages/web/modals/token-select.tsx
@@ -35,6 +35,7 @@ export const TokenSelectModal: FunctionComponent<
     >
       <div className="p-4" onClick={(e) => e.stopPropagation()}>
         <SearchBox
+          autoFocus
           type="text"
           className="!w-full"
           placeholder={props.placeholder ?? t("components.searchTokens")}