fix(web): improve enter functionality in text input (#1341)

reearth · Jan 10, 2025 · 887173f · 887173f
1 parent 9441b7b
commit 887173f
Showing 1 changed file with 13 additions and 2 deletions.
diff --git a/web/src/beta/lib/reearth-ui/components/TextInput/index.tsx b/web/src/beta/lib/reearth-ui/components/TextInput/index.tsx
@@ -44,6 +44,7 @@ export const TextInput: FC<TextInputProps> = ({
 }) => {
   const [currentValue, setCurrentValue] = useState(value ?? "");
   const [isFocused, setIsFocused] = useState(false);
+  const [isComposing, setIsComposing] = useState(false);
 
   useEffect(() => {
     setCurrentValue(value ?? "");
@@ -69,15 +70,23 @@ export const TextInput: FC<TextInputProps> = ({
 
   const handleKeyDown = useCallback(
     (e: KeyboardEvent<HTMLInputElement>) => {
-      if (e.key === "Enter" || e.key === "Return") {
+      if (e.key === "Enter" && !isComposing) {
         e.preventDefault();
         (e.target as HTMLInputElement).blur();
       }
       onKeyDown?.(e);
     },
-    [onKeyDown]
+    [isComposing, onKeyDown]
   );
 
+  const handleCompositionStart = useCallback(() => {
+    setIsComposing(true);
+  }, []);
+
+  const handleCompositionEnd = useCallback(() => {
+    setIsComposing(false);
+  }, []);
+
   return (
     <Wrapper
       size={size}
@@ -104,6 +113,8 @@ export const TextInput: FC<TextInputProps> = ({
         autoFocus={autoFocus}
         onKeyDown={handleKeyDown}
         type={type}
+        onCompositionStart={handleCompositionStart}
+        onCompositionEnd={handleCompositionEnd}
       />
       {actions && <ActionsWrapper>{actions}</ActionsWrapper>}
     </Wrapper>