chore(web): support enter key to submit (#1258)

reearth · Nov 19, 2024 · 79e53f9 · 79e53f9
1 parent c29f8a0
commit 79e53f9
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 2 deletions.
diff --git a/web/src/beta/lib/reearth-ui/components/NumberInput/index.tsx b/web/src/beta/lib/reearth-ui/components/NumberInput/index.tsx
@@ -1,5 +1,12 @@
 import { fonts, styled } from "@reearth/services/theme";
-import { useState, useCallback, useEffect, FC, ChangeEvent } from "react";
+import {
+  useState,
+  useCallback,
+  useEffect,
+  FC,
+  ChangeEvent,
+  KeyboardEvent
+} from "react";
 
 export type NumberInputProps = {
   value?: number | string;
@@ -79,6 +86,13 @@ export const NumberInput: FC<NumberInputProps> = ({
     setIsFocused(true);
   }, []);
 
+  const handleKeyDown = useCallback((e: KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "Enter" || e.key === "Return") {
+      e.preventDefault();
+      (e.target as HTMLInputElement).blur();
+    }
+  }, []);
+
   return (
     <Wrapper
       size={size}
@@ -93,6 +107,7 @@ export const NumberInput: FC<NumberInputProps> = ({
         onChange={handleChange}
         onBlur={handleBlur}
         onFocus={handleFocus}
+        onKeyDown={handleKeyDown}
       />
       {unit && <UnitWrapper> {unit}</UnitWrapper>}
     </Wrapper>

diff --git a/web/src/beta/lib/reearth-ui/components/TextInput/index.tsx b/web/src/beta/lib/reearth-ui/components/TextInput/index.tsx
@@ -67,6 +67,17 @@ export const TextInput: FC<TextInputProps> = ({
     setIsFocused(true);
   }, []);
 
+  const handleKeyDown = useCallback(
+    (e: KeyboardEvent<HTMLInputElement>) => {
+      if (e.key === "Enter" || e.key === "Return") {
+        e.preventDefault();
+        (e.target as HTMLInputElement).blur();
+      }
+      onKeyDown?.(e);
+    },
+    [onKeyDown]
+  );
+
   return (
     <Wrapper
       size={size}
@@ -91,7 +102,7 @@ export const TextInput: FC<TextInputProps> = ({
         onFocus={handleFocus}
         appearance={appearance}
         autoFocus={autoFocus}
-        onKeyDown={onKeyDown}
+        onKeyDown={handleKeyDown}
         type={type}
       />
       {actions && <ActionsWrapper>{actions}</ActionsWrapper>}