diff --git a/ui/components/Shared/SharedAddressInput.tsx b/ui/components/Shared/SharedAddressInput.tsx index f8c669aeb..c1fb6b384 100644 --- a/ui/components/Shared/SharedAddressInput.tsx +++ b/ui/components/Shared/SharedAddressInput.tsx @@ -13,6 +13,7 @@ type Props = { value: { address: HexString; name?: string } | undefined, ) => void onFocus?: () => void + onKeyDown?: React.KeyboardEventHandler id?: string placeholder?: string isEmpty?: boolean @@ -23,6 +24,7 @@ export default function SharedAddressInput({ label, onAddressChange, onFocus, + onKeyDown, id, placeholder, isEmpty, @@ -48,6 +50,7 @@ export default function SharedAddressInput({ label={label} onChange={setInputValue} onFocus={onFocus} + onKeyDown={onKeyDown} errorMessage={errorMessage} id={id} placeholder={placeholder} diff --git a/ui/components/Shared/SharedInput.tsx b/ui/components/Shared/SharedInput.tsx index 88ef1afb6..18d7a53e4 100644 --- a/ui/components/Shared/SharedInput.tsx +++ b/ui/components/Shared/SharedInput.tsx @@ -14,6 +14,7 @@ interface Props { value?: string | undefined onChange?: (value: T | undefined) => void onFocus?: () => void + onKeyDown?: React.KeyboardEventHandler errorMessage?: string warningMessage?: string autoFocus?: boolean @@ -37,6 +38,7 @@ export function SharedTypedInput(props: Props): ReactElement { name, onChange, onFocus, + onKeyDown, value: currentValue, errorMessage, warningMessage, @@ -92,6 +94,7 @@ export function SharedTypedInput(props: Props): ReactElement { handleInputChange(event.target.value) } onFocus={onFocus} + onKeyDown={onKeyDown} data-empty={inputValue.trim().length < 1} className={classNames({ error: !isEmpty && (errorMessage ?? parserError !== undefined), diff --git a/ui/pages/Onboarding/Tabbed/ViewOnlyWallet.tsx b/ui/pages/Onboarding/Tabbed/ViewOnlyWallet.tsx index 570352266..8e46477b1 100644 --- a/ui/pages/Onboarding/Tabbed/ViewOnlyWallet.tsx +++ b/ui/pages/Onboarding/Tabbed/ViewOnlyWallet.tsx @@ -42,9 +42,7 @@ export default function ViewOnlyWallet(): ReactElement { ) const handleSubmitViewOnlyAddress = useCallback(async () => { - if (addressOnNetwork === undefined) { - return - } + if (addressOnNetwork === undefined) return await dispatch(addAddressNetwork(addressOnNetwork)) @@ -63,6 +61,22 @@ export default function ViewOnlyWallet(): ReactElement { setRedirect(true) }, [dispatch, addressOnNetwork]) + const handleFormSubmitOnEnter = ( + event: React.KeyboardEvent, + ) => { + if (event.key === "Enter") { + event.preventDefault() + handleSubmitViewOnlyAddress() + } + } + + const handleFormSubmitOnClick = ( + event: React.MouseEvent, + ) => { + event.preventDefault() + handleSubmitViewOnlyAddress() + } + // Redirect to the final onboarding tab once an account is set if (redirect) { return @@ -84,23 +98,20 @@ export default function ViewOnlyWallet(): ReactElement {
-
{ - event.preventDefault() - handleSubmitViewOnlyAddress() - }} - > +
- +
{t("submit")}