Fix card view onblur event

CHANGELOG.md

@@ -1,8 +1,13 @@
 # CHANGELOG
 
+## Unreleased
+  - Fix bug where field would be incorrectly presented as invalid while using autocomplete
+  - Update Braintree web dependencies
+    - braintree-web to 3.122.0
+
 ## 1.44.1
   - Fix bug where the last card field would not display a message if the user tabbed to the Paypal Collection notice
-  - Update Braintree web dependancies
+  - Update Braintree web dependencies
     - asset-loader to 2.0.2
     - browser-detection to 2.0.2
     - uuid to 1.0.1

package.json

@@ -64,12 +64,12 @@
     "watchify": "^4.0.0"
   },
   "dependencies": {
-    "@braintree/asset-loader": "2.0.2",
+    "@braintree/asset-loader": "2.0.3",
     "@braintree/browser-detection": "2.0.2",
     "@braintree/event-emitter": "0.4.1",
     "@braintree/uuid": "1.0.1",
     "@braintree/wrap-promise": "2.1.0",
-    "braintree-web": "3.117.1"
+    "braintree-web": "3.122.0"
   },
   "browserify": {
     "transform": [

src/views/payment-sheet-views/card-view.js

@@ -13,7 +13,7 @@
 
 var PASSTHROUGH_EVENTS = [
   'empty',
   // TODO should intercept this event and call tokenize
   'inputSubmitRequest',
   'binAvailable'
 ];
@@ -501,14 +501,20 @@
 
   this.model._emit('card:blur', event);
 
-  setTimeout(function () {
-    // when focusing on a field by clicking the label,
-    // we need to wait a bit for the iframe to be
-    // focused properly before applying validations
-    if (this._shouldApplyFieldEmptyError(event.emittedBy, field)) {
-      this.showFieldError(event.emittedBy, this.strings['fieldEmptyFor' + capitalize(event.emittedBy)]);
-    }
-  }.bind(this), 150);
+  if (field.isEmpty) {
+    setTimeout(function () {
+      // When focusing on a field by clicking the label,
+      // we need to wait a bit for the iframe to be
+      // focused properly before applying validations.
+      // New fix guarantees that we have actual state at the moment
+      var currentState = this.hostedFieldsInstance.getState();
+      var currentField = currentState.fields[event.emittedBy];
+
+      if (currentField && currentField.isEmpty && this._shouldApplyFieldEmptyError(event.emittedBy, currentField)) {
+        this.showFieldError(event.emittedBy, this.strings['fieldEmptyFor' + capitalize(event.emittedBy)]);
+      }
+    }.bind(this), 150);
+  }
 };
 
 CardView.prototype._onCardTypeChangeEvent = function (event) {

test/unit/views/payment-sheet-views/card-view.js

@@ -1301,7 +1301,7 @@ describe('CardView', () => {
       );
 
       test(
-        'sets the empty error when programatically focussing a hosted field (requires a setTimeout)',
+        'does not set the empty error when programatically focussing a hosted field (requires a setTimeout)',
         done => {
           const fakeElement = document.createElement('div');
           const fakeHostedField = document.createElement('iframe');
@@ -1347,7 +1347,7 @@ describe('CardView', () => {
             fakeHostedField.focus();
 
             setTimeout(() => {
-              expect(numberFieldGroup.classList.contains('braintree-form__field-group--has-error')).toBe(true);
+              expect(numberFieldGroup.classList.contains('braintree-form__field-group--has-error')).toBe(false);
               done();
             }, 300);
           });