Hosted Fields Instance focus is not working properly on iOS Safari

General information

• SDK version: 3.39.0
• Environment: Sandbox and Production
• Browser and OS: Mozilla/5.0 (iPhone; CPU iPhone OS 12_0_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/12.0 Mobile/15E148 Safari/604.1 on iOS - iPhone 8 plus

Issue description

Hi, we are trying to implement an automatic focus change to next field for Credit Card fields. What we are trying to accomplish here is that when the user fills out the credit card number filed and it is determined as valid it immediately changes the focus field to next one (ex. date, then from date to CVV). We have successfully accomplished that on desktop browsers by using these lines of code:

Calling a function makeFieldValid() on validity change:

hostedFieldsInstance.on('validityChange', function(event) {
    var field = event.fields[event.emittedBy];

    if (!field.isValid && !field.isPotentiallyValid) {
        // Case when there is an error
        makeFieldInvalid(event.emittedBy);
    } else if (!field.isValid && field.isPotentiallyValid) {
        // Case when it's neutral
        makeFieldNeutral(event.emittedBy);
    } else {
        // Case when it's valid
        makeFieldValid(event.emittedBy);
    }
});

makeFieldValid() function sets focus to next field if determined as valid:

function makeFieldValid(field) {
    var $fieldContainer = $(hostedFieldsInstance.getState().fields[field].container);

    $fieldContainer.next().html(getFieldLabel(field));
    $fieldContainer.next().css('color', 'green');
    $fieldContainer.css('border', '1px solid green');

    if (field == 'number') {
            hostedFieldsInstance.focus('expirationDate');
    } else if (field == 'expirationDate') {
            hostedFieldsInstance.focus('cvv');
    }
}

And here’s the on focus function for hosted field:

hostedFieldsInstance.on('focus', function(event) {
    var field = event.fields[event.emittedBy];
    $(field.container).next().addClass('focus');
});

While this code works as expected on desktop browsers (Chrome, Safari, Opera etc.), there is a problem on Mobile Safari with this. When hostedFieldsInstance.focus is called the focus field is not changed although the on focus function is still called which can be seen when the field label changes its position (see attachment) and also testing with breakpoints in dev console shows the same.

Steps to reproduce the issue. ( Assuming that the order of fields is: number, exp. date, CVV )

1. On credit card hosted fields click inside exp. date field and type 2 chars.
2. Delete chars so the field is empty
3. Click in the CC Number field and Write a valid CC number
4. When it’s asserted as valid it should change focus to the next hosted field. But it’s not.

If the user is filling out the Credit card field as first it works as expected. Although if the user gets back to the field and changes something it does not work the second time anymore.

Hope you will be able to look into this issue.

Thanks, Emīls

[crookedneighbor]

Just did some testing, and that looks like it did the trick. Aiming to get this out in a release next week.

Thanks @lgodziejewski !

[crookedneighbor]

This is fixed in 3.42.0, thanks again @lgodziejewski !