add focus on search box when opening tokens select modal (#998)

osmosis-labs · Nov 12, 2022 · 27357d9 · 27357d9 · vercel · Nov 12, 2022
1 parent 3bdb9a5
commit 27357d9
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 0 deletions.
diff --git 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
@@ -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
@@ -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")}