From a360e30073705fe2016c9aedc614591557e207dd Mon Sep 17 00:00:00 2001
From: Qi <474021214@qq.com>
Date: Wed, 15 Feb 2023 22:29:07 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20add=20composition=20checkout=20when=20in?=
 =?UTF-8?q?put=20create=20workspace=20name,=20fixed=E2=80=A6=20(#1035)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/create-workspace/index.tsx | 14 ++++++---
 packages/component/src/ui/input/Input.tsx     | 30 ++++++++++---------
 2 files changed, 26 insertions(+), 18 deletions(-)

diff --git a/apps/web/src/components/create-workspace/index.tsx b/apps/web/src/components/create-workspace/index.tsx
index c3ccca93d6..e937d48110 100644
--- a/apps/web/src/components/create-workspace/index.tsx
+++ b/apps/web/src/components/create-workspace/index.tsx
@@ -1,7 +1,7 @@
 import { styled } from '@affine/component';
 import { Modal, ModalWrapper, ModalCloseButton } from '@affine/component';
 import { Button } from '@affine/component';
-import { useState } from 'react';
+import { useRef, useState } from 'react';
 import { Input } from '@affine/component';
 import { KeyboardEvent } from 'react';
 import { useTranslation } from '@affine/i18n';
@@ -18,6 +18,7 @@ export const CreateWorkspaceModal = ({ open, onClose }: ModalProps) => {
   const [workspaceName, setWorkspaceName] = useState('');
   const [loading, setLoading] = useState(false);
   const { createWorkspace } = useWorkspaceHelper();
+  const isComposition = useRef(false);
   const router = useRouter();
   const handleCreateWorkspace = async () => {
     setLoading(true);
@@ -32,8 +33,7 @@ export const CreateWorkspaceModal = ({ open, onClose }: ModalProps) => {
     }
   };
   const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
-    if (event.key === 'Enter') {
-      // 👇 Get input value
+    if (event.key === 'Enter' && workspaceName && !isComposition.current) {
       handleCreateWorkspace();
     }
   };
@@ -62,7 +62,13 @@ export const CreateWorkspaceModal = ({ open, onClose }: ModalProps) => {
               onChange={value => {
                 setWorkspaceName(value);
               }}
-            ></Input>
+              onCompositionStart={() => {
+                isComposition.current = true;
+              }}
+              onCompositionEnd={() => {
+                isComposition.current = false;
+              }}
+            />
             <Button
               disabled={!workspaceName}
               style={{
diff --git a/packages/component/src/ui/input/Input.tsx b/packages/component/src/ui/input/Input.tsx
index beeca9b5ef..8d08998d65 100644
--- a/packages/component/src/ui/input/Input.tsx
+++ b/packages/component/src/ui/input/Input.tsx
@@ -4,6 +4,7 @@ import {
   useState,
   FocusEventHandler,
   KeyboardEventHandler,
+  HTMLAttributes,
 } from 'react';
 import { StyledInput } from './style';
 
@@ -18,20 +19,20 @@ type inputProps = {
   onChange?: (value: string) => void;
   onBlur?: FocusEventHandler<HTMLInputElement>;
   onKeyDown?: KeyboardEventHandler<HTMLInputElement>;
-};
-export const Input = (props: inputProps) => {
-  const {
-    disabled,
-    value: valueProp,
-    placeholder,
-    maxLength,
-    minLength,
-    height,
-    width = 260,
-    onChange,
-    onBlur,
-    onKeyDown,
-  } = props;
+} & Omit<HTMLAttributes<HTMLInputElement>, 'onChange'>;
+export const Input = ({
+  disabled,
+  value: valueProp,
+  placeholder,
+  maxLength,
+  minLength,
+  height,
+  width = 260,
+  onChange,
+  onBlur,
+  onKeyDown,
+  ...otherProps
+}: inputProps) => {
   const [value, setValue] = useState<string>(valueProp || '');
   const handleChange: InputHTMLAttributes<HTMLInputElement>['onChange'] = e => {
     const { value } = e.target;
@@ -61,6 +62,7 @@ export const Input = (props: inputProps) => {
       onBlur={handleBlur}
       onKeyDown={handleKeyDown}
       height={height}
+      {...otherProps}
     ></StyledInput>
   );
 };