diff --git a/src/components/HealthChecks/HealthChecks.tsx b/src/components/HealthChecks/HealthChecks.tsx index e9a1935..fe4d8ef 100644 --- a/src/components/HealthChecks/HealthChecks.tsx +++ b/src/components/HealthChecks/HealthChecks.tsx @@ -1,5 +1,5 @@ import { useQueryClient } from "@tanstack/react-query"; -import { useEffect, useState } from "react"; +import { useEffect, useState, KeyboardEvent } from "react"; import { useDebug } from "../../hooks/useDebug"; import { usePersistence } from "../../hooks/usePersistence"; import { usePortForwarding } from "../../hooks/usePortForwarding"; @@ -85,6 +85,12 @@ export function HealthChecks({ online, onStepValid }: Props) { .then(() => codex.refetch()); }; + const onKeyDown = (e: KeyboardEvent) => { + if (e.key === "Enter") { + onSave(); + } + }; + return (
{isAddressInvalid ? ( @@ -116,6 +123,7 @@ export function HealthChecks({ online, onStepValid }: Props) { type="number" onChange={onPortChange} value={port} + onKeyDown={onKeyDown} isInvalid={isPortInvalid} placeholder="8080"> diff --git a/src/components/UserInfo/UserInfo.tsx b/src/components/UserInfo/UserInfo.tsx index 6580da7..f9ae37b 100644 --- a/src/components/UserInfo/UserInfo.tsx +++ b/src/components/UserInfo/UserInfo.tsx @@ -1,4 +1,4 @@ -import { ChangeEvent, useState } from "react"; +import { ChangeEvent, useState, KeyboardEvent } from "react"; import "./UserInfo.css"; import { Input } from "@codex-storage/marketplace-ui-components"; import EmojiPicker, { @@ -10,9 +10,10 @@ import { WebStorage } from "../../utils/web-storage"; type Props = { onNameChange?: (value: string) => void; + onEnterPressed: () => void; }; -export function UserInfo({ onNameChange }: Props) { +export function UserInfo({ onNameChange, onEnterPressed }: Props) { const [displayName, setDisplayName] = useState( WebStorage.onBoarding.getDisplayName() ); @@ -34,6 +35,12 @@ export function UserInfo({ onNameChange }: Props) { setAreEmojiVisible(false); }; + const onKeyDown = (e: KeyboardEvent) => { + if (e.key === "Enter") { + onEnterPressed(); + } + }; + return (
@@ -77,6 +84,7 @@ export function UserInfo({ onNameChange }: Props) { label="Preferred name" id="displayName" autoComplete="off" + onKeyDown={onKeyDown} value={displayName}>
diff --git a/src/routes/onboarding-name.tsx b/src/routes/onboarding-name.tsx index dd10761..8c9eefc 100644 --- a/src/routes/onboarding-name.tsx +++ b/src/routes/onboarding-name.tsx @@ -36,7 +36,7 @@ export const OnBoardingNameRoute = () => { What do you want to be called? - +