feat: start search when pressing enter button in textfield

MassBank · Jan 16, 2024 · c59d9ea · c59d9ea
1 parent 87ac912
commit c59d9ea
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 8 deletions.
diff --git a/web-frontend/src/elements/basic/Input.tsx b/web-frontend/src/elements/basic/Input.tsx
@@ -3,14 +3,17 @@ import './Input.scss';
 import {
   ChangeEvent,
   CSSProperties,
+  KeyboardEvent,
   RefObject,
   useCallback,
   useMemo,
 } from 'react';
 
 type InputProps = {
   type: React.HTMLInputTypeAttribute;
-  onChange: Function;
+  // eslint-disable-next-line no-unused-vars, @typescript-eslint/no-explicit-any
+  onChange: (value: any) => void;
+  onKeyDown: () => void;
   defaultValue?: string | number;
   label?: string;
   min?: number;
@@ -26,6 +29,7 @@ type InputProps = {
 function Input({
   type,
   onChange,
+  onKeyDown,
   defaultValue,
   label,
   min,
@@ -50,6 +54,15 @@ function Input({
     [onChange, type],
   );
 
+  const handleOnKeyDown = useCallback(
+    (e: KeyboardEvent<HTMLInputElement>) => {
+      if (e.key === 'Enter') {
+        onKeyDown();
+      }
+    },
+    [onKeyDown],
+  );
+
   return useMemo(
     () => (
       <div className={className}>
@@ -58,6 +71,7 @@ function Input({
           ref={ref}
           type={type}
           onChange={handleOnChange}
+          onKeyDown={handleOnKeyDown}
           defaultValue={defaultValue}
           placeholder={placeholder}
           min={min}
@@ -77,6 +91,7 @@ function Input({
       defaultValue,
       fontStyle,
       handleOnChange,
+      handleOnKeyDown,
       inputWidth,
       label,
       max,

diff --git a/web-frontend/src/elements/routes/pages/accession/Accession.tsx b/web-frontend/src/elements/routes/pages/accession/Accession.tsx
@@ -58,6 +58,13 @@ function Accession() {
     setIsRequesting(false);
   }, []);
 
+  const handleOnClick = useCallback(() => {
+    navigate({
+      pathname: routes.accession.path,
+      search: `?${createSearchParams({ id: accession })}`,
+    });
+  }, [accession, navigate]);
+
   const recordView = useMemo(
     () =>
       record ? (
@@ -86,16 +93,12 @@ function Accession() {
             defaultValue={accession && accession !== '' ? accession : undefined}
             label="Search for accession: "
             onChange={(acc: string) => setAccession(acc.trim())}
+            onKeyDown={handleOnClick}
             inputWidth="300px"
           />
           <Button
             child="Search"
-            onClick={() =>
-              navigate({
-                pathname: routes.accession.path,
-                search: `?${createSearchParams({ id: accession })}`,
-              })
-            }
+            onClick={handleOnClick}
             disabled={accession.trim() === ''}
             buttonStyle={
               accession.trim() === '' ? { color: 'grey' } : { color: 'black' }
@@ -116,7 +119,7 @@ function Accession() {
       </div>
     ),
 
-    [accession, isRequesting, navigate, recordView],
+    [accession, handleOnClick, isRequesting, recordView],
   );
 
   return accessionView;