focus() in Edge browser

Question

I am using popup.focus() to focus a popup window after a button is clicked. The focus() is working fine for all the browsers except for ****EDGE***

Answer 1

I have a solution/Hack

Please open link with the solution in your Edge browser https://codepen.io/PocketNinjaDesign/pen/OgbQXO

The window wasn't focusing intermittently!

The issue is that you need to mess with the focus of the page. if you open a popup and then focus on the parent page, then move the parent page even just 1 pixel. Clicking the button will focus on the popup again.

So for a crippled web browser where window methods don't seem to work what can you do other than wait for a few years for them to fix their focus() bug.

Well, the hack is to remove the focus from the parent window by generating a temp empty popup window. Then focusing on the main popup and closing the temp popup. All wrapped by a setTimeout @ 300ms, any lower and it didn't seem to work for me.

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div id="button" class="bttn">Open Popup</div>
<div id="focus" class="bttn focus">Focus on Popup</div>

JAVASCRIPT

// This is the main guts of this page!
var isMSEdge = function() {
  return window.navigator.userAgent.toLowerCase().indexOf('edge') > -1;
};

$(function() {
  var $bttn = $('#button');
  var $focusBttn = $('#focus');
  var tempWin;
  var testWindow;

  $bttn.on('click', function() {
    testWindow = window.open('', "pocketninja", "width=300, height=300");
    $focusBttn.show();
    $(this).hide();
  });

  $focusBttn.on('click', function() {
    if(testWindow && isMSEdge()) {
        tempWin = window.open('', 'temp', 'width=1, height=1');

        setTimeout(function() {
          testWindow.focus();
          tempWin.close();
        }, 300);   
    }
    else {
      testWindow.focus();
    }
  });
});