iOS iframe input issue

The app I’m building is reliant on using an iframe with a form.
The issue I am having is only occurring on iOS currently (was occurring on iOS10 too before upgrading to iOS11).

Unfortunately, the input detection is pretty erratic when tapping on the inputs in the forms, with the following symptoms:

  • On tap the inputs sometimes do not focus
  • If focussed tapping outside of the input does not close the keyboard
  • Scrolling behavior whilst focussed prevents you from scrolling further

The main issue I have is that there doesn’t seem to be any clear pattern, so it’s hard to detect how to resolve it.

I have tried the following to resolve the issue to no avail:

  • Used the WkWebView plugin - reverted back to UI since the WK plugin didn’t resolve this issue and created new ones
  • Disabled inputBlurring, scrollAssist, autoFocus in the config
  • Called keyboard.close() if the user taps outside the area - this created weird behavior on web Safari, whereby the keyboard would consistently re-appear if you tapped the screen

If it helps here’s my current setup:

    @ionic/cli-utils  : 1.9.2
    ionic (Ionic CLI) : 3.9.2

global packages:

    Cordova CLI : 7.0.1 

local packages:

    @ionic/app-scripts : 2.0.2
    Cordova Platforms  : android 6.2.3 browser 4.1.0 ios 4.4.0
    Ionic Framework    : ionic-angular 3.5.3

System:

    ios-deploy : 1.9.1 
    Node       : v6.11.2
    npm        : 5.4.1 
    OS         : macOS Sierra
    Xcode      : Xcode 9.0 Build version 9A235 

Any help is greatly appreciated.

UPDATE: I have finally been able to get WKWebView working. I had to remove the ios-longpress-fix plugin which was preventing buttons and links from working unless I used two taps.

The iframe inputs are focusing correctly now - the only issue is removing focus whenever the user taps out of a focussed iframe input. Any help on that would be much appreciated.

In the end, the main issue I had was with iOS Webview (both UI and WK) and iOS Safari. If you had an input within an iframe and then tapped out of that iframe. Whenever you tapped anywhere, the keyboard kept re-appearing even when you closed it again by pressing Done.

To resolve this I added a hidden input field (set the height to 0) and set focus onto this input field, whenever the user left the page that the iframe was on in the ionViewWillLeave function. Standard inputs once focused do not have the same issues as iframe inputs.

Hacky solution I know - but seemed the only way to resolve.

2 Likes