diff --git a/app/components/Onboarding/Steps/SeedConfirm.js b/app/components/Onboarding/Steps/SeedConfirm.js
index 31356736..0161616f 100644
--- a/app/components/Onboarding/Steps/SeedConfirm.js
+++ b/app/components/Onboarding/Steps/SeedConfirm.js
@@ -40,6 +40,19 @@ class SeedConfirm extends React.Component {
this.formApi = formApi
}
+ handleWordChange = (value, fieldIndex, wordIndex) => {
+ // If the word has been determined as valid, mark the field touched to trigger field highlighting.
+ const error = this.validateWord(wordIndex, value)
+ if (!error) {
+ this.formApi.setTouched(`word${fieldIndex}`, true)
+ }
+ // Otherwise reset the field state to prevent highlightning as valid.
+ else {
+ this.formApi.setTouched(`word${fieldIndex}`, false)
+ this.formApi.setError(`word${fieldIndex}`, null)
+ }
+ }
+
validateWord = (index, word) => {
const { seed } = this.props
return !word || word !== seed[index] ? 'incorrect' : null
@@ -65,48 +78,42 @@ class SeedConfirm extends React.Component {
onSubmit={onSubmit}
onSubmitFailure={onSubmitFailure}
>
- {({ formState }) => {
- const shouldValidateInline = formState.submits > 0
- return (
- <>
- }
- subtitle={
-
- }
- align="left"
- />
+ }
+ subtitle={
+
+ }
+ align="left"
+ />
-
+
- {seedWordIndexes.map((wordIndex, index) => {
- return (
-
-
- this.validateWord.call(null, wordIndex - 1, value)}
- placeholder={intl.formatMessage({ ...messages.word_placeholder })}
- required
- />
-
- )
- })}
- >
+ {seedWordIndexes.map((wordIndex, index) => {
+ // Only validate if the word has been entered connectly already or the form has been siubmitted.
+ return (
+
+
+ this.validateWord.call(null, wordIndex - 1, value)}
+ onChange={e => this.handleWordChange(e.target.value, index, wordIndex - 1)}
+ placeholder={intl.formatMessage({ ...messages.word_placeholder })}
+ />
+
)
- }}
+ })}
)
}