[iOS] Keyboard doesn't hide when focused inside iframe

[ghost]

We have an app that is partial native; a few pages have been rewritten into the app, while the other pages get loaded inside an iframe. I know this is not the way to go, but this is temporary and we didn't have much time.

We have 1 single view with an iframe. Whenever an external page (aka not implemented yet) opens, it opens that view and passes the url to the iframe.

Everything works, except the following: If an input field gets selected inside the iframe, and the view gets closed, the keyboard doesn't hide. We tried using window['Keyboard'].hide(), which works once, but then the keyboard opens whenever the next view opens.

Versions:

Ionic:

   ionic (Ionic CLI)  : 4.5.0
   Ionic Framework    : ionic-angular 3.9.2
   @ionic/app-scripts : 3.2.1

---

cordova --v: 8.1.2 ([email protected])

---

"cordova-ios": "4.5.5",
"cordova-plugin-ionic-keyboard": "2.1.3",

[mathatan]

Running into this issue also. For us the iFrame contains payment form inputs so moving them outside of an iFrame is not really an option. Essentially after focusing a field in an iFrame when view is tapped keyboard will reopen. Reopen of the keyboard will happen even when all events are disabled via Safari Web Inspector.

[ghost]

Running into this issue also. For us the iFrame contains payment form inputs so moving them outside of an iFrame is not really an option. Essentially after focusing a field in an iFrame when view is tapped keyboard will reopen. Reopen of the keyboard will happen even when all events are disabled via Safari Web Inspector.

We've found a temporary fix for this (maybe it's useful for you too).

1. Add a hidden input under the iframe

<ion-input #hiddenInput type="text" style="width:0;height:0;padding:0;margin:0;opacity:0;"></ion-input>

2. Add it in the .ts file

@ViewChild('hiddenInput') hiddenInput;

3. Focus the hidden input and immediately blur it when the user leaves the view

ionViewWillLeave() {
    this.hiddenInput.setFocus();
    this.hiddenInput.setBlur();
}

This shouldn't be the solution, but it works for now and the keyboard doesn't do anything dodgy during this.

[mathatan]

Thanks. I ended up using similar kind of solution for now.

[ghost]

@mathatan and @BlackFayah do you find any other solution ? this solution does not work for me ? i have a payment url inside the iframe but whenever i click on the input field the page is redirect and keyboard doesn't close.

ionic 3 , ios

[nymphetamineinside]

the same issue with ionic 2

[nascarjake]

Having the same issue with Ionic 3.9.6 There is a similar issue that was closed citing its not an issue of this plugin. Been looking everywhere - dont really know where the issue lies - I just want a solution.

The input work around doesnt work for me because my problem is the iframe has multiple inputs and multiple pages to go through within the iframe. Clicking anywhere on the iframe or even on the base page will never close the keyboard after its opened via an iframe. This makes navigating the iframe difficult for users. Even if i call keyboard hide on leave for that page, it doesnt help going from one input to another - clicking checkboxes, clicking buttons, scrolling to read text.

Anyone have any suggestions?

[jcesarmobile]

Can you provide a sample app where it can be easily reproduced?