fix(seed): only highlight seed after success

Ensure that the seed confirmation input fields only turn green when the
user inputs the specific word correctly

Fix #938

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,10 +78,6 @@ class SeedConfirm extends React.Component {
         onSubmit={onSubmit}
         onSubmitFailure={onSubmitFailure}
       >
-        {({ formState }) => {
-          const shouldValidateInline = formState.submits > 0
-          return (
-            <>
         <Header
           title={<FormattedMessage {...messages.retype_seed_title} />}
           subtitle={
@@ -87,6 +96,7 @@ class SeedConfirm extends React.Component {
         <Bar my={4} />
 
         {seedWordIndexes.map((wordIndex, index) => {
+          // Only validate if the word has been entered connectly already or the form has been siubmitted.
           return (
             <Flex key={`word${index}`} justifyContent="flex-start" mb={3}>
               <Label htmlFor="alias" width={25} mt={18}>
@@ -95,18 +105,15 @@ class SeedConfirm extends React.Component {
               <Input
                 field={`word${index}`}
                 name={`word${index}`}
-                      validateOnBlur={shouldValidateInline}
-                      validateOnChange={shouldValidateInline}
+                validateOnBlur
+                validateOnChange
                 validate={value => this.validateWord.call(null, wordIndex - 1, value)}
+                onChange={e => this.handleWordChange(e.target.value, index, wordIndex - 1)}
                 placeholder={intl.formatMessage({ ...messages.word_placeholder })}
-                      required
               />
             </Flex>
           )
         })}
-            </>
-          )
-        }}
       </Form>
     )
   }