iOS: Input doesn't loose focus if button is clicked outside of iframe

Hi

Currently I trapped into scenario when I have bunch of inputs inside of my jotform iframe. When I start to interact with "outside world" inputs keep to be focused.

It happens only to iOS

What I've tried so far:

I'd appreciate any help.

Thanks!

I have embedded one of your forms here and I was able to replicate the issue.
https://shots.jotform.com/adrian/embed/script/82588425946169.html

If an input is focused, clicking outside the Iframe does not have any effect. The focus stays.

This is happening in iOS only and it is an iOS issue.

I was able to fix it by adding the following JavaScript to the page where the form is embedded.
(add this just before the closing body tag)

<script>
  function removeFocus() {
    document.activeElement.blur();
  }
  document.body.addEventListener("touchstart", removeFocus);
</script>

Result:

I hope this helps.

Adrian, your script solves the problem, howewer, currently it make another one. If we try to tap on JotForm input field and set focus on it, this field will not get focus or will get it randomly. Can you help please?

On which iPhone are you testing this issue since I wasn't able to replicate on iPhone 7, iOS12?

Please advise.

Thank you!

We are using iPad Mini and iOS 11

After further research, It seems that this issue is a bug on the IOS 11 itself.

I checked some resources and found this was one of their solutions.

Kindly try adding this code to your Form.

var isAppleDevice = navigator.userAgent.match(/(iPod|iPhone|iPad)/) != null;

var inputs = jQuery("input");
if ( isAppleDevice ){
        $(document).on('touchstart','body', function (evt) {
            var targetTouches = event.targetTouches;
            if ( !inputs.is(targetTouches)){
                inputs.context.activeElement.blur();
            }
        });
    }

https://stackoverflow.com/questions/49998568/iphone-and-ipad-when-clicking-outside-input-field-never-loose%C2%B4s-focus-html-j

Hope this helps.

Hi, Richie_P

I applied your fix to my code and it help with the original issue. Howewer, it brings another issue - after clicking outside the iframe I can't focus and select any inputs inside the iframe.

I tried to manually focus an iFrame, but it didn't help.

Can you please share to us your embedded form so that we can check it out?

I have tested my colleagues form https://shots.jotform.com/adrian/embed/script/82588425946169.html and it is working correctly at my end. However, as I have mentioned this is a known bug on IOS 11.

Thank you.

Yes, this form can be used to test. The demo provided by your colleagues works for me too, but they forgot about one really important detail. In this demo both iframe and top document use one domain. And in our application browser will use cross-domain rules.

Now we can move focus outside JotForm iFrame to our Angular 6 app. But when we try to click on iFrame after that - it will not recieve any events and will not focus any inputs. But if we tap input with two fingers at the same time - it will focus the input.  Maybe this help you to find an answer to our issue.

Could you please share where your form is embedded so we can test this issue more?

I couldn't find the link in this thread.

Thank you!

You can use this link https://neufitangularpoc.azurewebsites.net

Click on "New Client Registration", then fill some name (for example, William Harris) and birthday, then fill the code 2009, and you will see the Client Registration Form(you could see it before in this thread). After that, you can reproduce a bug.

I'm asking to clarify the test environment. You are using an iPad Mini 4 with iOS11 and Safari browser, isn't it?

And this is your form:

https://www.jotformeu.com/form/82881938201360

You embedded this form to this page:

https://neufitangularpoc.azurewebsites.net

If I'm wrong please correct me. 

Yep, everything is correct. This bug is also reproducible on iPad (9.7) and iPad Pro

To clarify, I need to login first before I can see the form?

Maybe using CSS will focus the iframe.

 .jotform-form{
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  top: 0;
  -webkit-overflow-scrolling: touch;
  overflow-y: scroll;
}

Please give it a try and let us know how it goes.