Input type="text" does not work in frame on iOS

[stefek99]

Video: https://www.youtube.com/watch?v=pj1YmMvzAWc (1m 24s)

Code: http://plnkr.co/edit/uIC1MxxqmS6s5d6gLwEo?p=preview

Preview: http://run.plnkr.co/7eteB3OaVmNDdZt0/

<iframe src="iframed-pure.html" height="100px"></iframe>
<iframe src="iframed-ionic.html" height=50% width=100%></iframe>

Pure iframe works:

<input type="text">

Ionic iframe doesn't... But only on iOS (Safari and Chrome). On desktop, Android, Windows Phone it works.

Any ideas?

[ericwooley]

I tried the plunker in the simulator.

I had problems focusing on the first input (without the search icon), however after clicking about several times I found that sometimes I could type into it.

The second input, with the search bar, I was not able to type into at all.

I created a fork of your plunker http://plnkr.co/edit/cVnE8vjUBuAGW7ghKC0S?p=preview

and was not able to type into the input fields, but was able to focus on them.

So this does seem like an ionic bug to me, however, I would suggest you use a directive or ng-include instead of an iframe if at all possible.

[perrygovier]

Thanks for these examples, we'll look in to it.

[stefek99]

The whole reason of having an iframe was to present a mobile-sized app on a desktop.

iframe approach was no good and eventually ended up using a few classes from your competetitor: https://github.com/twbs/ratchet/blob/master/docs/assets/css/docs.css

  .device {
    position: relative;
    top: 50px;
    display: block;
    width: 395px;
    height: 813px;
    margin-left: -20px;
    font-family: "Helvetica Neue", sans-serif;
    background-image: url("device-sprite.png");
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: 300%;
    -webkit-transition: background-image .1s linear;
       -moz-transition: background-image .1s linear;
            transition: background-image .1s linear;
  }

  .device .device-content {
    position: absolute;
    top: 117px;
    left: 37px;
    width: 321px;
    height: 569px;
    overflow: hidden;
    font-size: 17px;
    line-height: 21px;
    background-color: #fff;
  }

(I think that iframe events still remain relevant but not critical to what I wanted to achieve)

[perrygovier]

A little more detail. Since we're using JS scrolling and click helpers, iframes are problematic. If we address the issue, we'll need to set up a way for these listeners to be "injected" in to child instances of a DOM.

[perrygovier]

I'm unable to access the plunkr anymore, they must have removed it. Is anyone able to reproduce this still? We've introduced a handful of tap/click fixes, that might have helped this.

[ericwooley]

http://embed.plnkr.co/cVnE8vjUBuAGW7ghKC0S/preview

This plunkr worked for me just now. I can copy paste one for you if you need.

[ericwooley]

I checked out the plunker again, it seems to work fine now. It was definitely broken before. Did the Beta6 version get updated?

[perrygovier]

Oh, sweet, it's working for me now too. I can't get it in to edit mode, but I can take the code out of here and move it to codepen or my local machine. It is still linking to beta6, I'l take a look at it with the nightlies.

[stefek99]

Just so you know - it's not mission critical (found workaround to present better on the large screen)

Plnkr - http://plnkr.co/edit/uIC1MxxqmS6s5d6gLwEo?p=preview - should be editable, just tried in an incognito window.

[ericwooley]

@stefek99 So is it working for you? It seems to work fine on that plunkr for me

[stefek99]

@ericwooley - I just tried on iOS simulator - no it doesn't work for me.

found workaround - #1534 (comment)

By saying should be editable I was referring to "I can't get it in to edit mode" thingy.

[perrygovier]

So I was playing around with it a bit yesterday. Odd thing is, we have an app that does something similar, without issue. Good thing to note is that it's not really an issue on iOS 8, though there's a related new issue. Still not a solution, but it's not forgotten.

[perrygovier]

Now that iOS 8 is out, could you tell me if you still see it there? I don't.

[ericwooley]

Unfortunately, I no longer have a setup to test this, I don't have ios 8 either :(

[stefek99]

Good call with iOS8...

I've just tried: http://run.plnkr.co/Nq7ICvzbHpm82QHE/ (note a new plnkr link as previous expired)

Works for me, feel free to close the issue OR if you consider it red herring investigate further.

[perrygovier]

Gonna call this closed. Let me know if it pops up again.

[pugwonk]

Hi there - I'm experiencing what I think is exactly this issue. If you look at http://mycoast.org/temp/frame.html on a non-iOS device, it shows you a login prompt you can type into. If you look at it on an iOS device, you can't type anything. If I drop the Ionic JS script, it works fine. I thought from this thread that perhaps it was due to me using an older version of the framework, but I'm also seeing it using /1.0.0-rc.2/js/ionic.bundle.min.js.

And yes, I know loading Ionic in a frame is a terrible idea - I'm planning to change this but right now my site needs to work this way. :)

[pugwonk]

If it helps at all, I notice that attaching events to $(document).keypress also stops working if Ionic is loaded in a frame (this is on all browsers, not just iOS).

[pugwonk]

Just in case anyone else is fumbling over this... I managed to get it to struggle into life by catching the ng-keypress event and manually adding the key code to the string. Something like:

<xmp></xmp>

And then...

app.controller("KeyboardFix", function ($scope) {
    $scope.inputValue = '';
    $scope.getKey = function(event, forInput) {
        if (document.getElementById(forInput) != null) {
            $scope.inputValue += String.fromCharCode(event.keyCode);
        }
        event.preventDefault();
    }
});

[miaotmac]

any solution on this issue？

[nil135]

You need to add one css only to input elements.

input {
    -webkit-user-select: text; /* Chrome, Opera, Safari */
    -moz-user-select: text; /* Firefox 2+ */
    -ms-user-select: text; /* IE 10+ */
    user-select: text; /* Standard syntax */
}

[harryizquierdo]

Thanks nil135, I used the solution

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.