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}
>
);
};