Merge pull request #508 from alleslabs/feat/auto-focus-enter

Improve contract selection
alleslabs · Aug 29, 2023 · 9738fa1 · 9738fa1
2 parents b869658 + 713e619
commit 9738fa1
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 9 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -39,6 +39,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Features
 
+- [#508](https://github.com/alleslabs/celatone-frontend/pull/508) Add auto focus, enter key listener on contract selection
 - [#492](https://github.com/alleslabs/celatone-frontend/pull/492) Add jsonschema actions on contract detail page
 - [#486](https://github.com/alleslabs/celatone-frontend/pull/486) Switch to schema tab when available and prefill,expand,and scroll to the prefill msg
 - [#483](https://github.com/alleslabs/celatone-frontend/pull/483) Add json schema functionality to execute page

diff --git a/src/lib/components/select-contract/SelectContractInstantiator.tsx b/src/lib/components/select-contract/SelectContractInstantiator.tsx
@@ -16,6 +16,7 @@ import {
 import { useQuery } from "@tanstack/react-query";
 import type { AxiosError } from "axios";
 import { useState } from "react";
+import type { KeyboardEvent } from "react";
 
 import { CustomIcon } from "../icon";
 import {
@@ -56,6 +57,8 @@ export const SelectContractInstantiator = ({
 
   const { getContractLists } = useContractStore();
 
+  const isMobile = useMobile();
+
   // TODO - Revisit false case
   const { instantiatedListInfo, isLoading } = useInstantiatedByMe(true);
   const contractLists = [instantiatedListInfo, ...getContractLists()];
@@ -98,7 +101,21 @@ export const SelectContractInstantiator = ({
     setListSlug(slug);
   };
 
-  const isMobile = useMobile();
+  const handleSubmit = () => {
+    const err = validateContractAddress(searchContract);
+    if (err !== null) setInvalid(err);
+    else {
+      AmpTrack(AmpEvent.USE_CONTRACT_MODAL_SEARCH);
+      refetch();
+    }
+  };
+
+  const handleKeydown = (event: KeyboardEvent<HTMLInputElement>) => {
+    if (event.key === "Enter") {
+      handleSubmit();
+    }
+  };
+
   return (
     <>
       <Button
@@ -151,20 +168,15 @@ export const SelectContractInstantiator = ({
                     }}
                     placeholder={`ex. ${exampleContractAddress}`}
                     size="lg"
+                    autoFocus
+                    onKeyDown={handleKeydown}
                   />
                   <Button
                     height="56px"
                     minW="72px"
                     isDisabled={searchContract.length === 0}
                     isLoading={isFetching || isRefetching}
-                    onClick={() => {
-                      const err = validateContractAddress(searchContract);
-                      if (err !== null) setInvalid(err);
-                      else {
-                        AmpTrack(AmpEvent.USE_CONTRACT_MODAL_SEARCH);
-                        refetch();
-                      }
-                    }}
+                    onClick={handleSubmit}
                   >
                     Submit
                   </Button>