Dropdown inside an Iframe Issue

We are having the same exact problem as the OP. We have an iframe on our 3rd party sites creating the same issue.

At first I thought this may be related to javascript and other things but our tests on a stripped down example caused the same issue.

I have confirmed through javascript that the input, after the "Next" button is pressed has focus. Also confirmed that the buttons being pressed are registering but for some reason the values are not getting appended to the input itself.

This leads me to believe this is some sort of mobile safari bug, which means that it may be awhile until a fix comes out and even if one does... not all older devices will receive it (actually not sure yet if this exists on iOS legacy devices).

I have a basic proof of concept that will detect the characters pressed, decode them and append them to the input but it is a hack at best. You can only go so far to simulate native functionality. I would have to also simulate special buttons, like the backspace and spacebar for certain inputs. As a last ditch fix I may implement a plugin that would accomplish this but it would probably not have all of the functionality of a native input.

I'm dealing with this same issue. Has anyone found a solution?

A partial correction can be done with this code.But the form still looks bad.

var isIos = /(iPhone|iPad|iPod)/.test(window.navigator.userAgent);

if (isIos) {

$('#my_form').on('focus', 'input, select, textarea', function () {

this.scrollIntoView();

});

}

Waiting for a better solution