IE focus problem in iFrame

by Alvaro Silvino

HTML

<!-- Fiddle Start -->

    <h2>IE focus problem in iFrame</h2>

    <button onclick="openPopup()">open</button>

    <div id="innerHTML" style="display: none">
      <!--suppress HtmlFormInputWithoutLabel -->
      <textarea style="width: 300px; height: 170px; margin-bottom: 5px;">
        Some sample text here.

        Some sample text here.

        Some sample text here.

        Some sample text here.

        Some sample text here.
      </textarea>
      <br />
      <input type="button" onclick="parent['closePopup']();" value="close" />
    </div>

    <p>To reproduce:</p>
    <ol>
      <li>open this page with IE10 / IE11</li>
      <li>click "open"</li>
      <li>click on "some sample text"</li>
      <li>click "close"</li>
      <li>click "open"</li>
      <li>click on "some sample text"</li>
    </ol>
    <p>Expected results: text gets the focus and shows the caret.</p>
    <p>Actual results: text does not get the focus.</p>

    <input type="button" onclick="burn(this)" style="width: 250px" value="Start burning your IE" />
    <!--suppress HtmlFormInputWithoutLabel -->
    <input type="text" id="loopCount" value="10000" style="width: 50px" />
    <p>IE is so interesting :( </p>
    <p>if you keep your browser busy (click the above button), the issue would be gone.</p>
    <p>Maybe the cpu burning task is scaring her &#x1F631; </p>

    <!-- Fiddle End -->

CSS

/*
 * Copyright (c) 2014 Mailtech.cn, Ltd. All Rights Reserved.
 */

.overlay {
    width       : 320px;
    height      : 220px;
    position    : fixed;
    top         : 50px;
    left        : 80px;
    background  : #fff;
    padding     : 0;
    border      : solid 1px #AAA;
    z-index     : 3;
}

.overlay iframe {
    width  : 100%;
    height : 100%;
    border : none;
}

JavaScript

/*
 * Copyright (c) 2014 Mailtech.cn, Ltd. All Rights Reserved.
 */

function closePopup() {
    // $(".overlay").remove();
    document.body.removeChild(document.body.lastChild);
}

function iFrameHTML() {
    return "<html>"
            + "<head><title>Focus test, IFrame</title></head>"
            + "<body style='background-color: #EEE'>"
            + document.getElementById("innerHTML").innerHTML
            + "</body>"
            + "</html>";
}


function openPopup() {
    // Append to DOM
    document.body.insertAdjacentHTML('beforeEnd',
            '<div class="overlay"><iframe src="javascript:parent.iFrameHTML();"></iframe></div>');

    // ??? This is needed to reproduce the bug!
    // $popupIFrame.on('load', function () {});
}


function burn(button) {
    if (burn.intervalID) {
        clearInterval(burn.intervalID);
        burn.intervalID = 0;
        button.value = 'Click me again to burn';
        return;
    }

    var loopCount = parseInt(document.getElementById("loopCount").value) || 10000;
    // set not idle
    burn.intervalID = setInterval(function () {
        var x = 0;
        for (var i = 0; i < loopCount; i++) {
            x = (x + Math.random() * 1000) >>> 0;
        }
        button.value = 'Click me to stop: ' + x;
    }, 1000);
}