Merge pull request #226 from vtex/fix/error-msg

Do not show validation errors if user is still typing
vtex · Dec 12, 2019 · 2f13bb3 · 2f13bb3
2 parents dbc5e79 + 396f71c
commit 2f13bb3
Show file tree

Hide file tree

Showing 5 changed files with 83 additions and 39 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+### Changed
+
+- Input field do now show validation error message when focused.
+
 ## [3.8.6] - 2019-12-11
 
 ### Fixed

diff --git a/react/__snapshots__/AddressForm.test.js.snap b/react/__snapshots__/AddressForm.test.js.snap
@@ -21,7 +21,7 @@ exports[`AddressForm should omit fields that are used in to get the postal code
       name="street"
       onBlur={[Function]}
       onChange={[Function]}
-      onFocus={undefined}
+      onFocus={[Function]}
       placeholder={null}
       type="text"
       value=""
@@ -46,7 +46,7 @@ exports[`AddressForm should omit fields that are used in to get the postal code
       name="number"
       onBlur={[Function]}
       onChange={[Function]}
-      onFocus={undefined}
+      onFocus={[Function]}
       placeholder={null}
       type="text"
       value=""
@@ -71,7 +71,7 @@ exports[`AddressForm should omit fields that are used in to get the postal code
       name="complement"
       onBlur={[Function]}
       onChange={[Function]}
-      onFocus={undefined}
+      onFocus={[Function]}
       placeholder="Optional"
       type="text"
       value=""
@@ -96,7 +96,7 @@ exports[`AddressForm should omit fields that are used in to get the postal code
       name="neighborhood"
       onBlur={[Function]}
       onChange={[Function]}
-      onFocus={undefined}
+      onFocus={[Function]}
       placeholder={null}
       type="text"
       value=""
@@ -121,7 +121,7 @@ exports[`AddressForm should omit fields that are used in to get the postal code
       name="city"
       onBlur={[Function]}
       onChange={[Function]}
-      onFocus={undefined}
+      onFocus={[Function]}
       placeholder={null}
       type="text"
       value=""
@@ -191,7 +191,7 @@ exports[`AddressForm should omit fields that are used in to get the postal code
       name="receiver"
       onBlur={[Function]}
       onChange={[Function]}
-      onFocus={undefined}
+      onFocus={[Function]}
       placeholder={null}
       type="text"
       value=""

diff --git a/react/inputs/DefaultInput/__snapshots__/DefaultInput.test.js.snap b/react/inputs/DefaultInput/__snapshots__/DefaultInput.test.js.snap
@@ -18,9 +18,9 @@ exports[`Input should render custom class 1`] = `
     id="ship-number"
     maxLength="9"
     name="number"
-    onBlur={[MockFunction]}
+    onBlur={[Function]}
     onChange={[Function]}
-    onFocus={undefined}
+    onFocus={[Function]}
     placeholder="Optional"
     type="text"
     value=""
@@ -46,9 +46,9 @@ exports[`Input should render default case 1`] = `
     id="ship-number"
     maxLength="9"
     name="number"
-    onBlur={[MockFunction]}
+    onBlur={[Function]}
     onChange={[Function]}
-    onFocus={undefined}
+    onFocus={[Function]}
     placeholder="Optional"
     type="text"
     value=""
@@ -74,9 +74,9 @@ exports[`Input should render different id 1`] = `
     id="ship-number"
     maxLength="9"
     name="number"
-    onBlur={[MockFunction]}
+    onBlur={[Function]}
     onChange={[Function]}
-    onFocus={undefined}
+    onFocus={[Function]}
     placeholder="Optional"
     type="text"
     value=""
@@ -102,9 +102,9 @@ exports[`Input should render different id based on fieldName 1`] = `
     id="ship-number"
     maxLength="9"
     name="number"
-    onBlur={[MockFunction]}
+    onBlur={[Function]}
     onChange={[Function]}
-    onFocus={undefined}
+    onFocus={[Function]}
     placeholder="Optional"
     type="text"
     value=""
@@ -130,9 +130,9 @@ exports[`Input should render different input type 1`] = `
     id="ship-number"
     maxLength="9"
     name="number"
-    onBlur={[MockFunction]}
+    onBlur={[Function]}
     onChange={[Function]}
-    onFocus={undefined}
+    onFocus={[Function]}
     placeholder="Optional"
     type="text"
     value=""

diff --git a/react/inputs/DefaultInput/index.js b/react/inputs/DefaultInput/index.js
@@ -10,6 +10,29 @@ import { injectIntl, intlShape } from 'react-intl'
 import GeolocationNumberInput from './GeolocationNumberInput'
 
 class Input extends Component {
+  constructor(props) {
+    super(props)
+
+    this.state = {
+      showErrorMessage: false,
+    }
+  }
+
+  handleChange = e => {
+    this.setState({ showErrorMessage: false })
+    this.props.onChange && this.props.onChange(e)
+  }
+
+  handleFocus = e => {
+    this.setState({ showErrorMessage: false })
+    this.props.onFocus && this.props.onFocus(e)
+  }
+
+  handleBlur = e => {
+    this.setState({ showErrorMessage: true })
+    this.props.onBlur && this.props.onBlur(e)
+  }
+
   render() {
     const {
       field,
@@ -65,12 +88,12 @@ class Input extends Component {
             className={loading ? 'loading-postal-code' : null}
             address={address}
             autoFocus={autoFocus}
-            onChange={this.props.onChange}
-            onBlur={this.props.onBlur}
+            onChange={this.handleChange}
+            onBlur={this.handleBlur}
             disabled={loading}
             inputRef={inputRef}
             type={shouldShowNumberKeyboard ? 'tel' : 'text'}
-            onFocus={onFocus}
+            onFocus={this.handleFocus}
           />
           {loading && <PostalCodeLoader />}
           {field.forgottenURL && (
@@ -80,7 +103,7 @@ class Input extends Component {
               </a>
             </small>
           )}
-          {valid === false ? (
+          {valid === false && this.state.showErrorMessage ? (
             <InputError reason={address[field.name].reason} />
           ) : null}
         </InputLabel>
@@ -101,14 +124,14 @@ class Input extends Component {
                 id: 'address-form.geolocation.example.UNI',
               }),
             })}
-            onChange={this.props.onChange}
-            onBlur={this.props.onBlur}
+            onChange={this.handleChange}
+            onBlur={this.handleBlur}
             disabled={loading}
             inputRef={inputRef}
-            onFocus={onFocus}
+            onFocus={this.handleFocus}
           />
           {loading && <PostalCodeLoader />}
-          {valid === false ? (
+          {valid === false && this.state.showErrorMessage ? (
             <InputError reason={address[field.name].reason} />
           ) : null}
         </InputLabel>
@@ -122,30 +145,30 @@ class Input extends Component {
             field={field}
             options={options}
             address={address}
-            onChange={this.props.onChange}
-            onBlur={this.props.onBlur}
+            onChange={this.handleChange}
+            onBlur={this.handleBlur}
             disabled={loading}
             inputRef={inputRef}
-            onFocus={onFocus}
+            onFocus={this.handleFocus}
           />
         ) : (
           <InputText
             field={field}
             address={address}
             autoFocus={autoFocus}
-            onChange={this.props.onChange}
+            onChange={this.handleChange}
             placeholder={
               !field.hidden && !field.required
                 ? intl.formatMessage({ id: 'address-form.optional' })
                 : null
             }
-            onBlur={this.props.onBlur}
+            onBlur={this.handleBlur}
             disabled={loading}
             inputRef={inputRef}
-            onFocus={onFocus}
+            onFocus={this.handleFocus}
           />
         )}
-        {valid === false ? (
+        {valid === false && this.state.showErrorMessage ? (
           <InputError reason={address[field.name].reason} />
         ) : null}
       </InputLabel>

diff --git a/react/inputs/StyleguideInput/index.js b/react/inputs/StyleguideInput/index.js
@@ -17,11 +17,13 @@ class StyleguideInput extends Component {
 
     this.state = {
       isInputValid: props.address[props.field.name].valid || true,
+      showErrorMessage: false,
     }
   }
 
   handleChange = e => {
-    this.props.onChange(e.target.value)
+    this.setState({ showErrorMessage: false })
+    this.props.onChange && this.props.onChange(e.target.value)
   }
 
   componentDidUpdate(prevProps) {
@@ -35,11 +37,21 @@ class StyleguideInput extends Component {
     }
   }
 
+  handleFocus = event => {
+    this.setState({ showErrorMessage: false })
+  }
+
   handleSubmit = event => {
     event.preventDefault()
+    this.setState({ showErrorMessage: true })
     this.props.onSubmit && this.props.onSubmit()
   }
 
+  handleBlur = event => {
+    this.setState({ showErrorMessage: true })
+    this.props.onBlur && this.props.onBlur(event)
+  }
+
   render() {
     const {
       address,
@@ -68,12 +80,14 @@ class StyleguideInput extends Component {
       error: !this.state.isInputValid,
       ref: inputRef,
       errorMessage:
+        this.state.showErrorMessage &&
         address[field.name].reason &&
         this.props.intl.formatMessage({
           id: `address-form.error.${address[field.name].reason}`,
         }),
-      onBlur: this.props.onBlur,
+      onBlur: this.handleBlur,
       onChange: this.handleChange,
+      onFocus: this.handleFocus,
       isLoading: loading,
     }
 
@@ -119,7 +133,7 @@ class StyleguideInput extends Component {
               intl.formatMessage({ id: `address-form.field.${field.label}` })
             }
             errorMessage={
-              address[field.name].reason &&
+              address[field.name].reason && this.state.showErrorMessage &&
               this.props.intl.formatMessage({
                 id: `address-form.error.${address[field.name].reason}`,
               })
@@ -131,7 +145,8 @@ class StyleguideInput extends Component {
               }),
             })}
             onChange={this.handleChange}
-            onBlur={this.props.onBlur}
+            onBlur={this.handleBlur}
+            onFocus={this.handleFocus}
             disabled={loading || disabled}
             error={!this.state.isInputValid}
             ref={inputRef}
@@ -154,13 +169,14 @@ class StyleguideInput extends Component {
                 intl.formatMessage({ id: `address-form.field.${field.label}` })
               }
               errorMessage={
-                address[field.name].reason &&
+                address[field.name].reason && this.showErrorMessage &&
                 this.props.intl.formatMessage({
                   id: `address-form.error.${address[field.name].reason}`,
                 })
               }
               onChange={this.handleChange}
-              onBlur={this.props.onBlur}
+              onBlur={this.handleBlur}
+              onFocus={this.handleFocus}
               disabled={loading || disabled}
               error={!this.state.isInputValid}
               ref={inputRef}
@@ -193,7 +209,7 @@ class StyleguideInput extends Component {
               id: `address-form.field.${field.label}`,
             })}
             onChange={this.handleChange}
-            onBlur={this.props.onBlur}
+            onBlur={this.handleBlur}
           />
         </div>
       )
@@ -225,8 +241,9 @@ class StyleguideInput extends Component {
               ? this.props.intl.formatMessage({ id: 'address-form.optional' })
               : null
           }
-          onBlur={this.props.onBlur}
+          onBlur={this.handleBlur}
           onChange={this.handleChange}
+          onFocus={this.handleFocus}
         />
       </div>
     )