diff --git a/packages/app/src/components/create-workspace/index.tsx b/packages/app/src/components/create-workspace/index.tsx index 2356e493f2..8f8ce49d1c 100644 --- a/packages/app/src/components/create-workspace/index.tsx +++ b/packages/app/src/components/create-workspace/index.tsx @@ -20,6 +20,12 @@ export const CreateWorkspaceModal = ({ open, onClose }: ModalProps) => { onClose({ workspaceId: workspace.id }); setActiveWorkspace(workspace); }; + const handleKeyDown = (event: KeyboardEvent) => { + if (event.key === 'Enter') { + // 👇 Get input value + handleCreateWorkspace(); + } + }; return (
@@ -40,6 +46,7 @@ export const CreateWorkspaceModal = ({ open, onClose }: ModalProps) => { just one person or together as a team.

{ setWorkspaceName(value); }} diff --git a/packages/app/src/components/workspace-avatar/index.tsx b/packages/app/src/components/workspace-avatar/index.tsx index bff31d6f15..a8ef0960e3 100644 --- a/packages/app/src/components/workspace-avatar/index.tsx +++ b/packages/app/src/components/workspace-avatar/index.tsx @@ -20,7 +20,8 @@ export const WorkspaceAvatar = (props: IWorkspaceAvatar) => { background: stringToColour(props.name || 'AFFiNE'), borderRadius: '50%', textAlign: 'center', - lineHeight: sizeStr, + // Let the text inside the avatar be absolutely in the play + lineHeight: size - 2 + '[x', }} > {(props.name || 'AFFiNE').substring(0, 1)} diff --git a/packages/app/src/ui/input/Input.tsx b/packages/app/src/ui/input/Input.tsx index b3a702e4f3..718eb70034 100644 --- a/packages/app/src/ui/input/Input.tsx +++ b/packages/app/src/ui/input/Input.tsx @@ -11,6 +11,7 @@ type inputProps = { onChange?: (value: string) => void; // eslint-disable-next-line @typescript-eslint/no-explicit-any onBlur?: (e: any) => void; + onKeyDown?: (e: any) => void; }; export const Input = (props: inputProps) => { @@ -23,6 +24,7 @@ export const Input = (props: inputProps) => { width = 260, onChange, onBlur, + onKeyDown, } = props; const [value, setValue] = useState(valueProp || ''); const handleChange: InputHTMLAttributes['onChange'] = e => { @@ -37,6 +39,10 @@ export const Input = (props: inputProps) => { const handleBlur: InputHTMLAttributes['onBlur'] = e => { onBlur && onBlur(e); }; + const handleKeyDown: InputHTMLAttributes['onKeyDown'] = + e => { + onKeyDown && onKeyDown(e); + }; useEffect(() => { setValue(valueProp || ''); }, [valueProp]); @@ -50,6 +56,7 @@ export const Input = (props: inputProps) => { minLength={minLength} onChange={handleChange} onBlur={handleBlur} + onKeyDown={handleKeyDown} > ); };