diff --git a/renderer/components/UI/Wizard.js b/renderer/components/UI/Wizard.js
index 1cb602c83fd..57f7322891a 100644
--- a/renderer/components/UI/Wizard.js
+++ b/renderer/components/UI/Wizard.js
@@ -1,9 +1,10 @@
/* eslint-disable react/no-multi-comp */
-import React, { createContext } from 'react'
+import React, { createContext, useRef, useCallback } from 'react'
import PropTypes from 'prop-types'
import { Transition, config } from 'react-spring/renderprops.cjs'
import { Box, Flex } from 'rebass/styled-components'
+import { useOnKeydown } from 'hooks'
import ArrowLeft from 'components/Icon/ArrowLeft'
import ArrowRight from 'components/Icon/ArrowRight'
import Button from './Button'
@@ -75,49 +76,55 @@ SkipButton.propTypes = {
children: PropTypes.node,
}
-class NextButton extends React.Component {
- static propTypes = {
- children: PropTypes.node,
- navigateTo: PropTypes.number,
- }
-
- static defaultProps = {
- children: 'Next',
- navigateTo: null,
- }
+const NextButton = props => {
+ const { children, navigateTo } = props
+ const formApiRef = useRef(null)
+ const onEnter = useCallback(() => {
+ const { current: formApi } = formApiRef
+ if (formApi) {
+ formApi.submitForm()
+ }
+ }, [formApiRef])
+ useOnKeydown('Enter', onEnter, true)
+ return (
+
+ {({ wizardApi, wizardState, formApi }) => {
+ const { formState } = wizardState
+ formApiRef.current = formApi
+ return (
+
+ )
+ }}
+
+ )
+}
- render() {
- const { children, navigateTo } = this.props
+NextButton.propTypes = {
+ children: PropTypes.node,
+ navigateTo: PropTypes.number,
+}
- return (
-
- {({ wizardApi, wizardState }) => {
- const { formState } = wizardState
- return (
-
- )
- }}
-
- )
- }
+NextButton.defaultProps = {
+ children: 'Next',
+ navigateTo: null,
}
class BackButton extends React.Component {